我們粗略的一起來看看清除浮動的辦法一共有多少個(IE里面用zoom:1就不寫了,下一個專題再寫)。對應(yīng)的 DEMO
采用偽類:after進(jìn)行后續(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)載Ghost的那篇文章;非常后悔的是當(dāng)初改了ghost的標(biāo)題將“最簡單”改成了“最優(yōu)”,以致于后面誤導(dǎo)了很多的同學(xué)。第二個是最近發(fā)現(xiàn)很多本站的冒牌站點(抄內(nèi)容就算了,樣式也抄就太過分了),更搞笑的是拿著這樣的站點來我這里面試 。
[ 上一篇 ] 今天給大家介紹10種大家不太熟悉的瀏覽器
[ 下一篇 ] 在手機上做廣告到底有沒有作用呢?
相關(guān)新聞
日期:19 瀏覽:20899
日期:19 瀏覽:20777
日期:19 瀏覽:18348
版權(quán)所有:啟邁科技-合肥網(wǎng)站建設(shè) 皖I(lǐng)CP備19009304號-1 皖公網(wǎng)安備 34010402702162號
網(wǎng)站建設(shè),網(wǎng)站設(shè)計公司啟邁科技,為眾多企業(yè)提供網(wǎng)站建設(shè),網(wǎng)站制作,響應(yīng)式網(wǎng)站設(shè)計,手機網(wǎng)站建設(shè),微網(wǎng)站,模板建站,企業(yè)郵箱等一站式互聯(lián)網(wǎng)解決方案和建站服務(wù)10年。