Home >Web Front-end >HTML Tutorial >DIV CSS block box floating design_html/css_WEB-ITnose
DIV CSS block box floating design_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:01:091174browse
During page layout, absolute positioning can be used to achieve this, but since the positions of other blocks will not change accordingly when a certain block frame is adjusted, this is not the preferred method of layout. But with a floating block box, it can be moved left or right until its outer edge touches the border of its containing block or the border of another floating block. And because the float is not in the document's normal flow, the block box in the document's normal flow behaves as if the float does not exist.
This article summarizes several simple examples of floating block boxes:
1. Sorting of non-floating block boxes
<html> <head> <title>DIV+CSS</title> <style> body{ margin:0px; } div{ width:200px; height:200px; font-size:40px; text-align:center; } #one{ background:red; } #two{ background:green; } #three{ background:yellow; } </style> </head> <body> <div id="one"> 框（1） </div> <div id="two"> 框（2） </div> <div id="three"> 框（3） </div> </body></html> 2. Float the first block box to the right
Redefine the #one selector, just add one line of code:
#one{ float:right; background:red; } The running results are as follows:
3. Set the first one to float to the left
In order for everyone to see the effect, the sizes of the three blocks must be adjusted, so I re-wrote the code directly.
<html> <head> <title>DIV+CSS</title> <style> body{ margin:0px; } div{ height:200px; font-size:40px; text-align:center; } #one{ width:200px; float:left; background:red; } #two{ width:240px; background:green; } #three{ width:200px; background:yellow; } </style> </head> <body> <div id="one"> 框（1） </div> <div id="two"> 框（2） </div> <div id="three"> 框（3） </div> </body></html> Running results:
It is not difficult to see that box (2) is covered by box (1). Only the extra 40px of width is visible. Because after the frame (1) is floated, it does not belong to the scope of the document flow, which is equivalent to its original position being vacant, so the frame (2) is naturally filled in.
4. Set all three boxes to float to the left
This only requires adding a line of code to the div{ } in Example 1:
float:left;Operation effect:
5. Set three boxes to the left (Insufficient space)
You only need to modify the sizes of the three blocks accordingly
<html> <head> <title>DIV+CSS</title> <style> body{ margin:0px; } div{ float:left; height:200px; font-size:40px; text-align:center; } #one{ width:500px; background-color:red; } #two{ width:400px; background:green; } #three{ width:600px; background:yellow; } </style> </head> <body> <div id="one"> 框（1） </div> <div id="two"> 框（2） </div> <div id="three"> 框（3） </div> </body></html>Run results: If there is insufficient space , the block automatically moves down
6. The third block is "stuck" by the first one
Block 3 is not on top There is enough space. When moving down, the extra part of block 1 will automatically block the movement of block 3.
Finally, let’s introduce another attribute: clear (clear attribute, specifying whether an element is allowed to have elements floating next to it)
clear:none;clear:left;clear:right;clear:both;There are several types in total values, respectively corresponding to different cleaning effects. By using this attribute flexibly, many problems can be easily solved.