|
清除浮動一個凡是做頁面的人都會遇到的一個東西，但是是否大家都能夠清楚的知道，全方位的了解呢？于是一閑下來了馬上寫了這樣的一篇文章，不能講面面俱到，然而基本能將我所知道的傾囊相授了。
我們粗略的一起來看看清除浮動的辦法一共有多少個(IE里面用zoom:1就不寫了，下一個專題再寫)。對應(yīng)的 DEMO
- 采用偽類:after進行后續(xù)空制的高度位零的偽類層清除
- 采用CSS overflow:auto的方式撐高
- 采用CSS overflow:hidden的方式產(chǎn)生怪異適應(yīng)
- 采用display:table將對象變成table形式
- 采用div標(biāo)簽，以及css的clear屬性
- 采用br標(biāo)簽，以及css的clear屬性
- 采用br標(biāo)簽，以及其自身HTML的clear屬性
粗略的看，他們都能將問題解決；然而他們另外一方面又有著各自的利弊。（一一對應(yīng)）
- 優(yōu)點結(jié)構(gòu)語義化完全正確，不會產(chǎn)生其余的怪異問題。
缺點復(fù)用方式不當(dāng)容易造成代碼量急劇增大。
建議最外層輕浮動時使用，或清晰模塊化復(fù)用方式的人使用。
- 優(yōu)點結(jié)構(gòu)語義化完全正確，代碼量極少。
缺點多個嵌套后，點擊最外層的輕浮動框會遭成最外層至最內(nèi)層內(nèi)容全選（FF）；或者在mouseover造成寬度改變時會出現(xiàn)最外層模塊有滾動條（IE）。
建議內(nèi)個模塊使用，請勿嵌套。
- 優(yōu)點結(jié)構(gòu)語義化完全正確，代碼量極少。
缺點內(nèi)容增多時候極易不會自動換行而內(nèi)容被隱藏掉。
建議寬度固定時使用，請勿嵌套。
- 優(yōu)點結(jié)構(gòu)語義化完全正確，代碼量極少。
缺點盒模型屬性已經(jīng)改變，可想而知奇異事件自然多得你數(shù)都數(shù)不到。
建議如果你不想改Bug改死你的話，最好不要使用；不過可以作為alpha版本當(dāng)中臨時性的忽悠下測試。
- 優(yōu)點代碼量極少，復(fù)用性極高。
缺點完全不能完美的適應(yīng)語義化，不利于改版以及需求變更。
建議初學(xué)者使用，可以讓你快速的解決浮動問題。
- 優(yōu)點語義化程度比第5種情況要更優(yōu)；代碼量極少，復(fù)用性極高。
缺點語義化依舊不完美，不利于改版以及需求變更。
建議初學(xué)者使用，可以讓你快速的解決浮動問題。
- 優(yōu)點語義化程度比第5、6種情況要更優(yōu)；代碼量最少，復(fù)用性極高。
缺點語義化依舊不完美，不利于改版以及需求變更。
建議引導(dǎo)初學(xué)者思維升級時使用，讓其明白與其用classname來控制一種表現(xiàn)，倒不如回歸到WEB1.0的時代的網(wǎng)頁直接用html屬性來控制表現(xiàn)，畢竟后者的代碼量更少。
最后，列舉完畢。然而我想有必要和大家道歉，關(guān)于之前轉(zhuǎn)載鬼的那篇文章；非常后悔的是當(dāng)初改了鬼的標(biāo)題將“最簡單”改成了“最優(yōu)”，以致于后面誤導(dǎo)了很多的同學(xué)。所以重新寫了一篇給大家分享。
原文：http://webteam.tencent.com/?p=1122
本文鏈接：http://www.95time.cn/tech/web/2009/6791.asp 
出處：騰訊Webteam
責(zé)任編輯：bluehearts
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
