CSS to clear the various methods of floating

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).