CSS Basics Tutorial: Floating
CSS Float
float: Let the element float, values: left (left float), right (right float)
The floating element will float to the left or right until it floats to the edge of the surrounding element or to the edge of the previous floating element.
Floating elements no longer take up space, and the level of floating elements is higher than that of ordinary elements.
Floating elements must be "block elements". No matter what element it originally was.
If the floating element does not specify a width, it will be as narrow as possible after floating. Therefore, floating elements generally have a fixed width and height.
Multiple elements in a row must be floated together.
Floating function: multiple block elements can be arranged side by side.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> .box{ width:350px; height:400px; background-color:#f0f0f0; } .box1{ width:50px; height:50px; background-color:#ff0000; float:left; } .box2{ width:50px; height:50px; background-color:#00ff00; float:left; } .box3{ width:50px; height:50px; background-color:#0000ff; float:left; } </style> </head> <body> <div class="box"> <div class="box1">php.cn</div> <div class="box2">php.cn</div> <div class="box3">php.cn</div> </div> </body> </html>
Q: How to surround elements and wrap floating elements?
At this time we need the knowledge in the next section. Under the floating element, use the clear floating operation.