欧美亚洲另类在线一区二区三区,中文av在线全新,中文字幕第一区二区

主頁 > 知識(shí)庫 > 對(duì)于IE7、FF、OP清除浮動(dòng)的最優(yōu)方法第1/2頁

對(duì)于IE7、FF、OP清除浮動(dòng)的最優(yōu)方法第1/2頁

在CSS森林群里討論一個(gè)margin的問題中無意間發(fā)現(xiàn)overflow也可以用來清除浮動(dòng)，嘿嘿，這個(gè)方法不單使用簡(jiǎn)單，而且FF、OP、IE7都支持，從此可以告別那又長兼容性又差的FF清浮動(dòng)的方法了。

方法真的很簡(jiǎn)單，只要為需要清浮動(dòng)的標(biāo)簽加上overflow這個(gè)屬性。
css代碼

復(fù)制代碼代碼如下:

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代碼

復(fù)制代碼代碼如下:

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> 

其中zoom是為了IE6準(zhǔn)備的。

<?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"> <head> <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="http://www.362672.com/"/> <meta name="Copyright" content="CSSForest" /> <meta name="Description" content="CSSɭ" /> <meta name="Keywords" content="CSS,web標(biāo)準(zhǔn),web,Blog,,XHTML,CSSForest,CSS森林" /> <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/javascript">_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> </head> <body> <p></p> <div   id="mxltgaaarev"   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   id="mxltgaaarev"   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> <div   id="mxltgaaarev"   class="copyright">   <div   id="mxltgaaarev"   class="vcard">     <div   id="mxltgaaarev"   class="logodiv"><img src="http://img68.imageshack.us/img68/8708/mylogo9we.gif" /></div>     <div   id="mxltgaaarev"   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 class="org"><strong>ORG:</strong>WebReBuild.ORG www.CSSForest.ORG</p>       <strong>Blog:</strong>http://forest.blogbus.com </div>   </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

12下一頁閱讀全文

您可能感興趣的文章:

CSS清除浮動(dòng)常用方法小結(jié)
css別忘記清除浮動(dòng)clear:both
一個(gè)老外弄的Clearing floats(清除浮動(dòng)的方法)
html清除浮動(dòng)的6種方法示例

標(biāo)簽：玉樹濰坊深圳商洛大同昭通石家莊濰坊

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《對(duì)于IE7、FF、OP清除浮動(dòng)的最優(yōu)方法第1/2頁》，本文關(guān)鍵詞對(duì)于,IE7,清除,浮動(dòng),的,最優(yōu),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。