1. Why to clear floating
In the Web page, div is generally nested, outside called the window, inside the div storage content, if not floating, such as the following code
</div> what we would expect to see is that the outer background of the #ccc layer contains a layer with a background of #333, but in fact, the outer layer is displayed at a height of almost 0, which is because the layer inside is floating, but if the size of the outer container is mandatory, it becomes less flexible. , the height is not automatically adapted.
2. Various methods of clearing floating
1, add <br/> tag after floating element;
<br/> tags have their own clear floating properties;
2, add a clear floating layer behind the floating element;
<div>
<div style= "Float:left" ></div>
<div style= "Float:left" ></div>
<div style= "Clear:both" ></div>
</div>
3, add Overflow:auto style to floating element;
4, set the following style for the last floating element:
/* Clear FLOAT */
. clearfix:after {
Visibility:hidden;
Display:block;
font-size:0;
Content: "";
Clear:both;
height:0;
}
. clearfix {
Zoom:1;
}
The principle is that it is used in the "advanced" browser: After Pseudo-class adds a non-display:none invisible block of content to the floating block and sets Clear:both to clean up the float. Add Haslayout to the floating block in IE6 and 7 to keep the floating block high and affect the flow of the document normally.
5, another concise approach:
. Cf:before,. Cf:after {
Content: "";
display:table;
}
. cf:after {
Clear:both;
}
. CF {
Zoom:1;
}
The principle is still the same. Use: After pseudo class to provide clear:both after a floating block. The difference is that hiding this space is using display:table. rather than setting visibility:hidden;height:0;font-size:0; Such a hack.
It is worth noting here: before Pseudo-class. In fact, he is to deal with the Top-margin side folding, and clean up the float is not much of a relationship. But because the float creates a block formatting context, so that the floating element on another element if there is just margin-bottom and this floating element just has margin-top, should let them do not fold (although this situation is not common).