How CSS is clearly floating

Summary

CSS clear floating float three ways to summarize, why clear float? What are the effects of floating?

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

Parsing the HTML code structure:

<DivClass="Outer"><DivClass="Div1">1</Div><DivClass="Div2">2</Div> <div class="Div3">3</div></ Div>              

Parsing CSS Code styles:

. outer{Border1px solid#ccc;Background#fc9;Color#fff;Margin50px Auto;Padding50px;}.div1{width:  80px; height: 80px; background: red; float: left;} .div2{width:  80px; height: 80px; background: blue; float: left;} .div3{width:  80px; height: 80px; background: sienna; float: left;}           

I don't set the height of the outermost div.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:

<DivClass="Outer"><DivClass="Div1">1</Div><DivClass="Div2">2</Div><DivClass="Div3">3</Div> <div class="Clear"></div></ Div>              

Css:

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

Result: (corrected: Padding will not be affected)

Method Two: Parent div definition Overflow:auto(Note: The parent div is the div.outer here)

Html:

<DivClass="Outer over-flow">//Add a class here<DivClass="Div1">1</Div><DivClass="Div2">2</Div><div class="Div3">3</div> <!--<div class= " Clear "></div>--></div>         

Css:

.over-flow{    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题}

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 said the principle: This method to clear the float is now a clear floating on the Internet, 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 div.clear tag in HTML, and outer uses its pseudo-class clear:after to add a div.clear-like effect inside the element. Let's take a look at its specific use method:

.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 in the properties of the direct write to clear clear:both, so you can clear the above label floating without adding an empty label to clear the float.

$ ('. float '). End (). Conclusion: Although there are a lot of ways to clear the float, but not every one is suitable for you, and not each can be very good compatible with all browsers, so refer to you think the best way to do, personally think the method three good, do not need more than the label, but also 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!

(End of this article)

Transferred from: http://my.oschina.net/leipeng/blog/221125

How CSS is clearly floating