Div CSS Clear Float common methods (: After and Clear:both) __div

Many front ends are made with ... clearfix:after{...} And. clearit{...} Combination to clear the float, let me explain the use of these two:

First of all, we cut the page often used to floating float:left; Float:right; There are floats that need to clear them,

After pseudo classes are not supported by IE6 7 Most of the time, it is generally necessary to define a fixed class name to set the value of the property clear both the div both used together.

<style type= "Text/css" >

*{margin:0; padding:0}

. left{Float:left;}

. clearfix:after {content: "."; display:block; height:0; visibility:hidden; clear:both;} Pseudo class cleanup

. clearfix {Zoom:1}

. clearit {clear:both; height:0; font-size:0; overflow:hidden;} Set class name cleanup

. main{width:1000px;}

. myright,.myleft{width:200px; height:200px background: #ddd;}

. myright{background:red}

</style>

The first kind of structure

<div class= "Main" >

<div class= "Myleft left" > Left-Hand </div>

<div class= "Myright left" > Right </div>

</div>

<div class= "Footer" >

<p> I am the bottom </p>

</div>

1 do not clear the floating standard browser and the ie8+ p tag will run to the right side of the floating div as shown here:

IE6 IE7 under

We can see that the standard and IE8 under the class name of main Div is not open, IE6 IE7 under the floating element was stretched.

We just need to fix the standard and ie8+ float; now we append a class name to main:

<div class= "main Clearfix" >//Here Append

<div class= "Myleft left" > Left-Hand </div>

<div class= "Myright left" > Right </div>

</div>

<div class= "Footer" >

<p> I am the bottom </p>

</div>

Because we set the. clearfix:after{.} in CSS So the float will not inherit at this time give. Main plus background {background:blue};

We found that the standard and ie6+ main had been stretched to the following figure:

IE6 under

Standard under:

No screenshots are made in other browsers.

The second structure requires the use of. clearit{...}

<style type= "Text/css" >

*{margin:0; padding:0}

. left{Float:left;}

. clearfix:after {content: "."; display:block; height:0; visibility:hidden; clear:both;} Pseudo class cleanup

. clearfix {Zoom:1}

. clearit {clear:both; height:0; font-size:0; overflow:hidden;} Set class name cleanup

. main{width:1000px;}

. mylast,.myright,.myleft{width:200px; height:200px background: #ddd;}

. myright{background:red}

. mylast{Background:purple height:140px}

</style>

Floating elements and elements that do not need to be floated are wrapped under the same father.

<div class= "Main" >

<div class= "Myleft left" > Left-Hand </div>

<div class= "Myright left" > Right </div>

<div class= "Mylast" > Last </div>

</div>

IE6 under

Element inheritance float runs to the floating element and has its own background

ie8+ and standards

The last div does not inherit the float but the contents of the element are blocked behind the floating div, and the background disappears and drills into the floating element.

At this point to the right div plus Clearfix class name, the following figure:

<div class= "Main" >

<div class= "Myleft left" > Left-Hand </div>

<div class= "Myright left Clearfix" > Right </div>

<div class= "Mylast" > Last </div>

</div>

Under the standard and under the ie6+ effect is invariable;

<div class= "Main" >

<div class= "Myleft left" > Left-Hand </div>

<div class= "Myright left" > Right </div>

<div class= "Clearit" ></div>//alternative method plus class for Clearit div

<div class= "Mylast" > Last </div>

</div>

ie6+ and Standard under the following figure:

At this time ie6+ and the standard display effect consistent floating is cleared;

This simple structure can also give the last Div set Clear:both this property and value;

It is better to add a <div class= "Clearit" to the back of a floating element when the structure is more complex to purge,     Of course, it can use the pseudo class to clear the float when it is cleared with the following pseudo class. This will reduce redundant code, with the ability to easily modify and maintain ...