Inadvertently see a very nice little trick. It's about using CSS to handle closed floating elements.
The method of closing floating elements (clearing float) is now a lot, you do not know the words to OLD9 blog to see, there is a closed floating element.
These methods I like best is to use: after Pseudo-class dynamic embedding an element to clear the floating, unfortunately the code is too large, looking not concise. Now I see a way to be super simple. Let me introduce you quickly. Original in: Http://annevankesteren.nl/2005/03/clearing-floats
The principle is this, the peripheral element is not very good extension, the problem is on the overflow, because overflow is not visible. See the explanation of the
References: In addition, if the element have any floating descendants whose bottom margin edge are below the bottom, then the Heigh T is increased to include those edges. Only floats that is children of the element itself or of descendants in the normal flow is taken into account, e.g., Flo ATS inside absolutely positioned descendants or other floats is not.
Now just add a overflow:auto to the peripheral element, and you can solve the problem, and the result is that it can be solved in addition to IE. It is necessary to solve the problem of IE, plus _height:1%; , the problem was solved completely.
Here are three examples of what I do as a comparison
1. No closed floating elements
2. Non-IE closed floating element
3. Fully closed element
<p><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/><title>super Simple clearing Floats</title><style type=" text/css "><!-- body{font:.9em/150% Verdana, Arial, Helvetica, Sans-serif normal; color: #333333;} h1{background: #f5f5f5; padding:6px;} em{color: #f60; font-style:normal;} code{display:block; font-family: "Courier New", Courier, monospace; border:1px #ccc dotted; padding:10px;} </P><P> #wrap_three {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;} </P><P>--></style></pead></P><P><body> <p>float LEFT</H1 > <p> this layer left floating </p> <code>.column_left{FLoat:left; width:20%; padding:10px;} </code> <p>float right</p> <p> This layer right floating, below is the full CSS, this is a peripheral wrap_three layer application <em>overflow: Auto;</em> plus <em>_height:1%;</em> closed floating model. The perimeter container can extend normally. IE6.0, Firefox 1.5 and Opera 9.0 all passed the test. </p> <code> #wrap_three {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;} </code> </body></ptml></P>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
