| |
早段時(shí)間特別的忙，忙到站點(diǎn)一直沒有更新；但是這段時(shí)間也是偷偷的做了一些的工作，比如對(duì)站點(diǎn)的JS進(jìn)行了壓縮，構(gòu)思labs分站以及聚合分站。
而此段時(shí)間最煩的是森林群里面的一群人每天上班都在吵，然后我就每次都裝嫩的在里面問：“各位高手，勞煩請(qǐng)問一下；清除浮動(dòng)怎么弄？”
清除浮動(dòng)一個(gè)凡是做頁(yè)面的人都會(huì)遇到的一個(gè)東西，但是是否大家都能夠清楚的知道，全方位的了解呢？于是一閑下來(lái)了馬上寫了這樣的一篇文章，不能講面面俱到，然而基本能將我所知道的傾囊相授了。
我們粗略的一起來(lái)看看清除浮動(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)語(yǔ)義化完全正確，不會(huì)產(chǎn)生其余的怪異問題。
缺點(diǎn)復(fù)用方式不當(dāng)容易造成代碼量急劇增大。
建議最外層輕浮動(dòng)時(shí)使用，或清晰模塊化復(fù)用方式的人使用。
優(yōu)點(diǎn)結(jié)構(gòu)語(yǔ)義化完全正確，代碼量極少。
缺點(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)語(yǔ)義化完全正確，代碼量極少。
缺點(diǎn)內(nèi)容增多時(shí)候極易不會(huì)自動(dòng)換行而內(nèi)容被隱藏掉。
建議寬度固定時(shí)使用，請(qǐng)勿嵌套。
優(yōu)點(diǎn)結(jié)構(gòu)語(yǔ)義化完全正確，代碼量極少。
缺點(diǎn)盒模型屬性已經(jīng)改變，可想而知奇異事件自然多得你數(shù)都數(shù)不到。
建議如果你不想改Bug改死你的話，最好不要使用；不過可以作為alpha版本當(dāng)中臨時(shí)性的忽悠下測(cè)試。
優(yōu)點(diǎn)代碼量極少，復(fù)用性極高。
缺點(diǎn)完全不能完美的適應(yīng)語(yǔ)義化，不利于改版以及需求變更。
建議初學(xué)者使用，可以讓你快速的解決浮動(dòng)問題。
優(yōu)點(diǎn)語(yǔ)義化程度比第5種情況要更優(yōu)；代碼量極少，復(fù)用性極高。
缺點(diǎn)語(yǔ)義化依舊不完美，不利于改版以及需求變更。
建議初學(xué)者使用，可以讓你快速的解決浮動(dòng)問題。
優(yōu)點(diǎn)語(yǔ)義化程度比第5、6種情況要更優(yōu)；代碼量最少，復(fù)用性極高。
缺點(diǎn)語(yǔ)義化依舊不完美，不利于改版以及需求變更。
建議引導(dǎo)初學(xué)者思維升級(jí)時(shí)使用，讓其明白與其用classname來(lái)控制一種表現(xiàn)，倒不如回歸到WEB1.0的時(shí)代的網(wǎng)頁(yè)直接用html屬性來(lái)控制表現(xiàn)，畢竟后者的代碼量更少。
最后，列舉完畢。然而在我的心中還是有一些事情要和大家說的，第一個(gè)是要和大家道歉，關(guān)于之前轉(zhuǎn)載Ghost的那篇文章；非常后悔的是當(dāng)初改了ghost的標(biāo)題將“最簡(jiǎn)單”改成了“最優(yōu)”，以致于后面誤導(dǎo)了很多的同學(xué)。第二個(gè)是最近發(fā)現(xiàn)很多本站的冒牌站點(diǎn)（抄內(nèi)容就算了，樣式也抄就太過分了），更搞笑的是拿著這樣的站點(diǎn)來(lái)我這里面試
|
|
|
| 【收藏】【打印】【進(jìn)入論壇】 |
|
|
|
|
| |
|
|
|
