我們粗略的一起來看看清除浮動(dòng)的辦法一共有多少個(gè)(IE里面用zoom:1就不寫了,下一個(gè)專題再寫)。對(duì)應(yīng)的DEMO采用偽類:after進(jìn)行后續(xù)空制的高度位零的偽類層清除
采用CSS overflow:auto的方式撐高
采用CSS overflow:hidden的方式產(chǎn)生怪異適應(yīng)
采用display:table將對(duì)象變成table形式
采用div標(biāo)簽,以及css的clear屬性
采用br標(biāo)簽,以及css的clear屬性
采用br標(biāo)簽,以及其自身HTML的clear屬性
粗略的看,他們都能將問題解決;然而他們另外一方面又有著各自的利弊。(一一對(duì)應(yīng))
優(yōu)點(diǎn)結(jié)構(gòu)語義化完全正確,不會(huì)產(chǎn)生其余的怪異問題。
缺點(diǎn)復(fù)用方式不當(dāng)容易造成代碼量急劇增大。
建議最外層輕浮動(dòng)時(shí)使用,或清晰模塊化復(fù)用方式的人使用。
優(yōu)點(diǎn)結(jié)構(gòu)語義化完全正確,代碼量極少。
缺點(diǎn)多個(gè)嵌套后,點(diǎn)擊最外層的輕浮動(dòng)框會(huì)遭成最外層至最內(nèi)層內(nèi)容全選(FF);或者在mouseover造成寬度改變時(shí)會(huì)出現(xiàn)最外層模塊有滾動(dòng)條(IE)。
建議內(nèi)個(gè)模塊使用,請(qǐng)勿嵌套。
優(yōu)點(diǎn)結(jié)構(gòu)語義化完全正確,代碼量極少。
缺點(diǎn)內(nèi)容增多時(shí)候極易不會(huì)自動(dòng)換行而內(nèi)容被隱藏掉。
建議寬度固定時(shí)使用,請(qǐng)勿嵌套。
優(yōu)點(diǎn)結(jié)構(gòu)語義化完全正確,代碼量極少。
缺點(diǎn)盒模型屬性已經(jīng)改變,可想而知奇異事件自然多得你數(shù)都數(shù)不到。
建議如果你不想改Bug改死你的話,最好不要使用;不過可以作為alpha版本當(dāng)中臨時(shí)性的忽悠下測(cè)試。
優(yōu)點(diǎn)代碼量極少,復(fù)用性極高。
缺點(diǎn)完全不能完美的適應(yīng)語義化,不利于改版以及需求變更。
建議初學(xué)者使用,可以讓你快速的解決浮動(dòng)問題。
優(yōu)點(diǎn)語義化程度比第5種情況要更優(yōu);代碼量極少,復(fù)用性極高。
缺點(diǎn)語義化依舊不完美,不利于改版以及需求變更。
建議初學(xué)者使用,可以讓你快速的解決浮動(dòng)問題。
優(yōu)點(diǎn)語義化程度比第5、6種情況要更優(yōu);代碼量最少,復(fù)用性極高。
缺點(diǎn)語義化依舊不完美,不利于改版以及需求變更。
建議引導(dǎo)初學(xué)者思維升級(jí)時(shí)使用,讓其明白與其用classname來控制一種表現(xiàn),倒不如回歸到WEB1.0的時(shí)代的網(wǎng)頁直接用html屬性來控制表現(xiàn),畢竟后者的代碼量更少。
最后,列舉完畢。
0
喜歡他,就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)