Clear Floating Clearfix

CSS clears floats with Clearfixmore 2013/11/4 Source: CSS Learning PageView: 11901Learning Tags: CSS clearfix This article guide: Write CSS is always floating and worry, if used floating, the floating parent will not follow the height of the floating box increases and increase, in Firefox and other standards-compliant browser, if there is a div as an external container, Internal Div If the float style is set, the outer container div cannot be stretched because it has no clear inside. We can use Clearfix to clear the float at this time.

What is. Clearfix

CSS CodeCopy

{  content: "";  Display:block;  Clear:both;  {  zoom:1;} <div class= "Clearfix" >  <div class= "floated" ></div></div>

The above code illustrates:

CSS CodeCopy

{           content: ".";     / * content is "." is a full stop in English. can also not write. */    Display:block;   / * This element is added as a block-level element. */    Clear:both;     / * Clear left and right side floats. */    Visibility:hidden;      / * Visibility is set to hidden. Pay attention to it and display:none; there is a difference. Visibility:hidden, still occupy space, just can't see it; * *    line-height:0;    /* This is for IE6, because IE6 does not support: After pseudo class, this magical zoom:1 allows the elements of IE6 to be cleared floating to wrap inside elements. */

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.

3, when the need to clear the float, just write a. Clearfix, then add the Clearfix class name to the element that needs to be cleared.

Instance:

HTML CodeCopy

<style type= "Text/css" > /* all major browsers support: after pseudo elements. */. Clearfix:after{content: "."; Display:block;height:0;clear:both;visibility:hidden}. Clearfix{*+ height:1%;} /* do not know what is the use, do not add IE7 there is no problem * *. box{ Background: #111; width:500px; Position:relative;} . L{float:left; background: #333; width:200px; height:100px;} r{float:right;background: #666; width:200px; height:200px;} s{width:100px; Height:100px;background: #999;p osition:absolute;right:-50px;;} </style> <div class= "box Clearfix" > <div class= "L" >left</div> <div class= "R" >right</div> <div Class= "s" >absolute</div> </div> </body>      

Clear Floating Clearfix