clearfix-Clear Float

First, the use of clear floating

. clearfix:after {
Content: "";
Display:block;
Clear:both;
height:0;
}
. clearfix {
Zoom:1;
}

<div class= "Clearfix" >
<div class= "floated" ></div>
</div>

The above code is the. Clearfix definition and application, simply say. Clearfix principle:

1, in IE6, 7 zoom:1 will trigger the haslayout, so that the element closed inside the float.

2, under the standard browser,. Clearfix:after this pseudo-class inserts a Clear:both block-level element after the element applied to the. Clearfix to clear the float.

<div>
<div class= "floated" ></div>
</div>
<div style= "Clear:both" ></div>

Second, the disadvantages of Clearfix.

As can be seen in the above code, aside from IE6, 7 does not talk about,. Clearfix inserts a CLEAR:BOTH element under a standard browser, which is likely to clear out unnecessary floats.

Transferred from: http://www.45eggs.com/xhtml-css/2011/css-clearfix.html

clearfix-Clear Float