Several ways to clear float in CSS

First, throw a problem brick (display:block) look at the phenomenon:

Parsing HTML code structure: <p class= "outer" >    <p class= "P1" >1</p>    <p class= "P2" >2</p>    <p class= "P3" >3</p></p>

Parsing CSS Code styles:

. outer{border:1px solid #ccc; background: #fc9; color: #fff; margin:50px auto;padding:50px;}. P1{width:80px;height:80px;background:red;float:left;}. P2{width:80px;height:80px;background:blue;float:left;}. P3{width:80px;height:80px;background:sienna;float:left;}

I don't set the height of the outermost p.outer here, but we know that if the elements inside it don't float, the height of the outer layer will be automatically open. But when the inner element floats, there is a bit of impact:

(1): Background cannot be displayed (2): Border cannot be stretched (3): Margin setting value does not display correctly

Second, clear CSS floating:

method One: add new elements, apply clear:both;

Html:

<p class= "outer" >    <p class= "P1" >1</p>    <p class= "P2" >2</p>    <p class= " P3 ">3</p>    <p class=" Clear "></p></p>

Css:

. clear{clear:both; height:0; line-height:0; font-size:0}

Result: (corrected: Padding will not be affected)

Method Two: parent P definition Overflow:auto (note: The parent P is the p.outer here)

Html:

<p class= "outer over-flow" >//Add a class    <p class= "P1" >1</p> <p class= "P2"    >2</ p>    <p class= "P3" >3</p>    <!--<p class= "Clear" ></p>--></p>

Css:

. over-flow{    Overflow:auto; zoom:1;//zoom:1; dealing with compatibility issues}

The result: Of course it is! Img{display:none}; Sketch

Principle: Use the overflow property to clear the float there is a point to note that the overflow property has three attribute values: hidden,auto,visible. We can use Hiddent and auto values to clear the float, but remember not to use the visible value, if the use of this value will not be able to achieve clear floating effect, the other two values can be, its area is said to be a SEO friendly, another hidden SEO is not too friendly, The other difference I can not say, nor waste time.

method Three: it is said to be the highest method: After method: (note: Father acting on a floating element)

First of all, the principle: This method to clear the float is now the most popular on the internet, a clear float, he is using: after and: Before to insert two elements inside the element, from the face to clear the effect of floating. The implementation principle is similar to the Clear:both method, except that: clear inserts a p.clear tag in HTML, and outer uses its pseudo-class clear:after to add a p.clear-like effect inside the element. Here's a look at how it's used:

. outer {zoom:1;}    /*==for Ie6/7 maxthon2==*/. outer:after {clear:both;content: '. '; Display:block;width:0;height:0;visibility:hidden;} /*==for ff/chrome/opera/ie8==*/

wherein Clear:both; means to clear all floats; content: '. ';
Display:block, for FF/CHROME/OPERA/IE8, where content () can be value or empty. The function of Visibility:hidden is to allow the browser to render it, but not to display it so that it can be clearly floated.

Last: But not unimportant, nor do I not know!

Next tab directly clear floating Brother label floating, the next tab of the properties of the direct write to clear clear:both; This allows you to clear the floating of the above label without adding an empty label.

Conclusion: Although there are many ways to clear the float, but not every kind is suitable for you, and not each can be very good compatible with all browsers, so refer to the best way to do, personally think three good method, do not need more than the label, but also can be very good compatibility. Again again: When an inner element is floating, the parent element will no longer contain the floating inner element if the float is not closed, because the floating element is out of the document flow. Which is why the outer layer cannot be stretched!