Page 1/2 optimal methods for clearing floating in IE7, ff, and OP

When discussing a margin issue in the CSS Forest Group, I accidentally found that overflow can also be used to clear floating. Hey, this method is not only simple, but also supports ff, op, and IE7, from then on, we can say goodbye to the FF Floating Method with long compatibility.

the method is really simple. You only need to add the overflow attribute to the label to be flushed.
CSS Code copy Code the code is as follows: ul {
list-style: none;
Height: auto;
margin: 0; P
adding: 0;
background-color: #436973;
}< br> Li {
float: Left;
width: 80px;
Height: 80px;
background-color: # 83b1df;
}< br>. demo {
clear: Both;
border: 1px solid # ff00ff;
margin-bottom: 5px;
}< br>. overflow {
overflow: auto;
ZOOM: 1;
background-color: #43ff73;
}< br> ul {
list-style: none;
Height: auto;
margin: 0;
padding: 0;
background-color: #436973;
}< br> Li {
float: Left;
width: 80px;
Height: 80px;
background-color: # 83b1df;
}< br>. demo {
clear: Both;
border: 1px solid # ff00ff;
margin-bottom: 5px;
}< br>. overflow {
overflow: auto;
ZOOM: 1;
background-color: #43ff73;
}

HTML codeCopy codeThe Code is as follows: <Div class = "Demo">
<Ul class = "overflow">
<Li> 1 </LI>
<Li> 2 </LI>
<Li> 3 </LI>
<Li> 4 </LI>
<Li> 5 </LI>
<Li> 6 </LI>
<Li> 7 </LI>
<Li> 8 </LI>
<Li> 9 </LI>
</Ul>
</Div>
<Div class = "Demo">
<Ul>
<Li> 1 </LI>
<Li> 2 </LI>
<Li> 3 </LI>
<Li> 4 </LI>
<Li> 5 </LI>
<Li> 6 </LI>
<Li> 7 </LI>
<Li> 8 </LI>
<Li> 9 </LI>
</Ul>
</Div>

Here, Zoom is prepared for IE6.<? XML version = "1.0" encoding = "UTF-8"?>Xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "ZH-CN" lang = "ZH-CN">

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Ghost Zhang

Email:Lovej1bz@gmail.com

QQ:22168741

Org:Webrebuild. org www. cssforest. org

Blog:Http://forest.blogbus.com