CSS Clear Float Common method

Most front-end uses. clearfix:after{...} And. clearit{...} Combination to clear the float.

The front-end development often uses the floating float:left; Float:right; There are floats need to clear them, after pseudo class due to IE6 7 is not supported so most of the time, it is generally necessary to define a fixed class name set the property of the clear value of the both div 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 to clear. Main{width:1000px;}. Myright,.myleft{width:200px;Height:200px;background:#ddd;}. Myright{background:Red}</style>

Structure One:

<Divclass= "Main">    <Divclass= "Myleft Left">Left</Div>    <Divclass= "Myright Left">Right</Div> </Div><Divclass= "Footer">    <P>Bottom</P></Div>

1 do not clear the floating standard browser and ie8+ p label will run to the right side of the floating div

IE6 IE7

We can see that the standard and IE8 class named Main div is not open, IE6 IE7 under the floating element is open.

We just need to solve the standard and ie8+ float, and now we'll append a class name to main as follows:

<Divclass= "Main Clearfix">//Append here<Divclass= "Myleft Left">Left</Div>    <Divclass= "Myright Left">Right</Div> </Div> <Divclass= "Footer">    <P>I am the bottom</P></Div>

Because we set the. clearfix:after{in the CSS. So the float won't go on.

At this point, add the background {Background:blue} to. Main;

We found that both the standard and ie6+ main have been stretched as follows:

IE6 under

Under Standard:

Not on other browsers.

Structure two:

At this point, you need to use the. 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>

At this point the floating element and the element that does not need to be floated are wrapped under the same father

<div class= "Main" >

<div class= "Myleft" > Left </div>

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

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

</div>

IE6 under

Element inheritance floats next to the floating element and has its own background

ie8+ and Standard

The last div does not inherit the float but the content inside the element is blocked behind the floating div, the background disappears, and the floating element is drilled underneath.

At this point, add Clearfix class name to the right Div, as follows:

<div class= "Main" >

<div class= "Myleft" > Left </div>

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

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

</div>

Under the standard and the ie6+ effect is unchanged;

<div class= "Main" >

<div class= "Myleft" > Left </div>

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

<div class= "Clearit" ></div>//New method plus div with class Clearit

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

</div>

ie6+ and standards such as:

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

This simple structure can also be used to set the last div clear:both this property and value, you can also get this effect,

When the structure is more complex to clean up often than to add a <div after the floating element class= "Clearit" ></div> more convenient, of course, can be used after the pseudo-class to clear floating when possible to use pseudo-class removal, which will reduce redundant code, with the ability to easily After modification and maintenance!!!

By specifying the value of the CSS property float, the element floats to the left or right, and then moves up by the successor element to fill the free space vacated by the previous element's float. The float property of the CSS is to change the default display of the block element object, and after the HTML tag sets the Float property, it will no longer occupy a single row, allowing the effect of multiple elements to be in the same row. Float is a powerful feature, but if you're not well-mastered, it's likely to be a nightmare for your debugging style.

With the float style, if the float is not cleared, then the parent element container with the floating element cannot be automatically stretched. If the inner float is not cleared, this causes the floating parent element to not automatically open to its own height. That is: When an element is floating, its parent element will not contain the floating element if it is not closed, because the floating element is detached from the document stream.

So you need to clear the float after the style definition, there are several ways to clear the float:

Clear:both Clear Float

Clear clears the float mainly by borrowing the clear property to clear the float, which is a relatively stale method of clearing the float, but it feels like this is the usual way to clear the float. Using Clear:both to clear the float, we need to add an extra element immediately after the need to clear the floating place, such as a div tag, and define their style as "Clear:both", which is typically used in the following way:

Copy CodeThe code is as follows:
<div class= "Demo A" >
<div class= "demob demofloat" >float left</div>
<div class= "Democ demofloat" >float right</div>
<div class= "Demod demofloat" >not float</div>
<div class= "Clear" ></div>
</div>

Copy CodeThe code is as follows:
<pre name= "code" class= "CSS" >. Clear {
Clear:both;/* mainly uses this property to clear the float */
/* In order not to allow IE to have a certain amount of space, personal suggestions add the following three attributes */
height:0;
line-height:0;
font-size:0;
}</pre>
<pre></pre>
<p></p>
<pre></pre>
<p></p>

<span style= "White-space:pre" ></span>2. Using overflow
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
<span style= "White-space:pre" ></span> using the overflow method to clear the float is relatively simple, just add the following properties to the floating element:</p>
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
</p><pre name= "code" class= "CSS" >. A
Overflow:auto;
zoom:1;/* triggers its layout under IE and uses _height:1% instead of zoom*/
}</pre><p></p>
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
<span style= "White-space:pre" ></span> use the overflow property to clear the float there is a point to note that the overflow attribute has a total of three attribute values: hidden,auto,visible. We can use the Hiddent and auto values to clear the float, but remember that you cannot use the visible value, and if you use this value you will not be able to clear the floating effect, the other two values can be. </p>
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
<span style= "White-space:pre" ></span> for overflow attribute Clear Chu float we can also apply:</p>
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
</p><pre name= "code" class= "CSS" >. A
overflow:auto;/* other browsers are recognized except IE6 and the following versions are not recognized */
}
* HTML. A
height:1%; /* ie5-6 */
}</pre><p></p>

<span style= "White-space:pre" ></span>3.clearfix method
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
<span style= "White-space:pre" ></span> This method clears the float is now one of the most pull-out floating on the net, is to use: after and: Before to insert two elements inside the element block, So as to achieve the effect of clear float. The implementation principle is similar to the Clear:both method, except that: clear inserts a div.clear tag in HTML, and Clearfix uses its pseudo-class clear:fix to add a div.clear-like effect inside the element. Let's take a look at its specific use:</p>
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
HTML code:</p>
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
</p><pre name= "code" class= "CSS" > <div class= "demo A Clearfix" >
<div class= "demob demofloat" >float left</div>
<div class= "Democ demofloat" >float right</div>
<div class= "Demod demofloat" >not float</div>
</div></pre><p></p>
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
<span style= "White-space:pre" ></span> use Clearfx to clear floats the main thing to master is to add a class name called Clearfix to the parent element with the floating element. For example, in our case, we need a div. A to add a Clearfix class name. And then add style to this clearfix </p>
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
</p><pre name= "code" class= "CSS" >. Clearfix:before,
. clearfix:after {
Content: ".";
Display:block;
height:0;
Visibility:hidden;
}
. clearfix:after {Clear:both;}
. clearfix {zoom:1;}/* IE < 8 */</pre><p></p>
<p style= "margin-top:0px; margin-bottom:9px; Color:rgb (64,64,64); font-family: ' Microsoft Yahei '; Line-height:28px ">
<span style= "White-space:pre" ></span> actually use only clearfix:after to achieve the effect of clear float, but only use Clearfix: After the cross-browser compatibility problem There will be a vertical margin overlay bug, so in order to make the browser compatible with this clearfix clear floating, on the original basis to add Clearfix:before, this solves the cross-browser compatibility problem. </p>
<p style= "margin-top:0px; margin-bottom:9px; font-family: ' Microsoft Yahei '; Line-height:28px ">
<span style= "White-space:pre" ></span> in so many ways to clear the float, did not leave the most primitive Clear:both method, especially clearfix:after clear floating, Completely is a clear:both, the difference is that you do not need to add a tag in the HTML, and only need to add a Clearfix class name in the parent element of the floating element, so it is easy to solve the problem of clear floating. </p>

CSS Clear Float Common method