In the CSS Forest group to discuss a margin problem inadvertently found overflow can also be used to clear the float, hey, this method is not only simple to use, but also FF, OP, IE7 support, from then on the long compatibility and poor FF clear floating method.
The method is really simple, as long as you add the overflow this property to the label that needs to be floated.
CSS Code
Copy Code code as follows:
ul{
List-style:none;
Height:auto;
Margin:0;p
adding:0;
Background-color: #436973;
}
li{
Float:left;
width:80px;
height:80px;
Background-color: #83B1DF;
}
. demo{
Clear:both;
border:1px solid #FF00FF;
margin-bottom:5px;
}
. overflow{
Overflow:auto;
Zoom:1;
Background-color: #43FF73;
}
ul{
List-style:none;
Height:auto;
margin:0;
padding:0;
Background-color: #436973;
}
li{
Float:left;
width:80px;
height:80px;
Background-color: #83B1DF;
}
. demo{
Clear:both;
border:1px solid #FF00FF;
margin-bottom:5px;
}
. overflow{
Overflow:auto;
Zoom:1;
Background-color: #43FF73;
}
HTML code
Copy code code 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>
One of the zoom was prepared for IE6.
<?xml version= "1.0" encoding= "Utf-8"?> <! 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" xml:lang= "ZH-CN" lang= "ZH-CN" > <pead> <meta http-equiv= "pragma "Content=" No-cache "/> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <meta http-equiv= content-language" content= "Utf-8"/> <meta name= "robots" content= "all" /> <meta name= "Author" content= "Ghost"/> <meta name= "Copyright" content= "Cssforest"/> <meta-name= "D Escription "content=" Cssɭ "/> <meta name=" Keywords "content=" Css,web Standard, Web,blog,,xhtml,cssforest,css forest "/> & Lt;title>overflow hack demo|www. Cssforest.org</title> <link rel= "shortcut Icon" href= "/favicon.ico" type= "Image/x-icon"/> <script src= "Http://www.google-analytics.com/urchin.js" type= "Text/javascript" ></script> <script type= "Text/javas"Cript ">_UACCT =" ua-780254-5 "Urchintracker ();</script> <style type=" Text/css ">/*<! [cdata[*/. Copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;} . Copyright A:link{color: #666666; text-decoration:none;} . Copyright A:hover{color: #CC9900; text-decoration:underline;} Ul{list-style:none;height:auto;margin:0;padding:0;background-color: #436973;} Li{float:left;width:80px;height:80px;background-color: #83B1DF;} . demo{clear:both;border:1px solid #FF00FF; margin-bottom:5px;} . Overflow{overflow:auto;zoom:1;background-color: #43FF73;} /*]]>*/</style> </pead> <body> <p></p> <div class= "Demo" > <ul class= "Overflow" > <li>1</li> <li>2</li> <li>3</li> &l t;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& Gt <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <LI>9</LI&G T </ul> </div> <div class= "Copyright" > <div class= "vcard" > <div class= "Logodiv" >&L t;/div> <div class= "info" > <p class= "fn n" ><strong class= "Given-name" >ghost</strong> ; <strong class= "Family-name" >Zhang</strong></p> <p><strong>Email:</strong> lovej1bz@gmail.com</p> <p class= "QQ" ><strong>QQ:</strong>22168741</p> <p CL ass= "org" ><strong>org:</strong>webrebuild.org www. Cssforest.org</p> <strong>blog:</strong> http://forest.blogbus.com </div> </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Current 1/2 page
12 Next read the full text
