css| Floating | tips | Web page about closed floating elements (clearing float) Now a lot of, you don't know the words to OLD9 blog look, there is a closed floating element.
These methods my favorite is to use: after Pseudo-class dynamic embedding an element used to clear the floating, unfortunately the code is too large, look not concise. Now I see a way to be super simple. Give me a quick introduction.
The principle is this, the outer element is not very good extension, the problem is on the overflow, because the overflow is not visible. See the interpretation of the consortium:
In addition, if the element has any floating descendants whose bottom the edge is margin the below, bottom the Increased to include those edges. Only floats this are children of the element itself or of descendants in the normal flow are taken to account, e.g., Flo ATS inside absolutely positioned descendants or other floats are.
Now as long as you will add a overflow:auto to the peripheral elements, you can solve the problem, the result is that in addition to IE, can really solve. Down to solve the problem of IE, plus _height:1%; , the problem is completely solved.
Here are three examples I've done as a comparison
Xhtml:
<div id= "Wrap" >
<div class= "Column_left" >
</div>
<div class= "Column_right" >
</div>
</div>
Css:
#wrap {border:6px #ccc solid; overflow:auto; _height:1%;}
. column_left{float:left; width:20%; padding:10px;}
. column_right{float:right; width:75% padding:10px; border-left:6px #eee solid;
