CSS clear use of floating clearfix:after

If there is a div container outside, and its internal div container sets the float style, the outer container div cannot be stretched because there is no clear inside.
Workaround:

CSS code:

Copy Code code as follows:


. clearfix:after {


content: ".";


Display:block;


height:0;


Clear:both;


Visibility:hidden;


}


. clearfix{Display:inline-block;}


/* Hides from Ie-mac * *


*html. clearfix{height:1%;


. clearfix{Display:block;}


/* End Hide from Ie-mac * *





//clearfix CSS uses the pseudo object after this


//Applies the content in the end of the Clearfix element


//Transfer character "", Mac IE browser will ignore this paragraph hack, but Windows IE will not

Here is a detailed explanation:

The first thing to clear the floating principle is that the element leaves enough vertical margins to float the element.

Copy Code code as follows:


<div >


<div style= "Float:left" ></div>


</div>

The effect is that the outer div will not contain the inline div. Because the floating element is detached from the original document stream.
Take this as an example: Generally, there are three ways to clear floating
。 First: Let the outer element also float, for example:

Copy Code code as follows:


<div style= "Float:left" >


<div style= "Float:left" ></div>


</div>

Then add the Clear:both effect to the element other than this element.
Second: Add an element to the end of the outer div and use this element to float clearly.
Specific usage:

Copy Code code as follows:


<div style= "Clearfix" >


<div style= "Float:left" ></div>


</div>


. clearfix:atfer{


content: ".";


Display:block;


Visibility:hidden;


height:0;


Clear:both;


}

. Clearfix{display:inline-block}
. Clearfix{display:block}
The latter two are set for compatibility with other browsers. Because: After not all browsers are supported.
Third: Using the overflow attribute

Copy CodeThe code is as follows:


<div style= "Overflow:hidden" >


<div style= "Float:left" ></div>


</div>