怎樣寫更簡潔的CSS清理浮動方式

2024-04-26    分類： 網(wǎng)站建設(shè)

清理浮動有很多種方式，像使用 br 標(biāo)簽自帶的 clear 屬，使用元素的 overflow，使用空標(biāo)簽來設(shè)置 clear:both 等等。

但考慮到兼容問題和語義化的問題，一般我們都會使用如下代碼來清理浮動。

/* 清理浮動 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix { zoom:1; }

其原理是，在「高級」瀏覽器中使用 :after 偽類在浮動塊后面加上一個非 display:none 的不可見塊狀內(nèi)容來，并給它設(shè)置 clear:both 來清理浮動。在 ie6 和 7 中給浮動塊添加 haslayout 來讓浮動塊撐高并正常影響文檔流。

上面的代碼應(yīng)該是現(xiàn)在主流的清理浮動方式。現(xiàn)在支付寶就使用這樣的方式。而現(xiàn)在，Nicolas Gallagher 給出了一個更簡潔的方案：

.cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } .cf { zoom:1; }

原理還是一樣的。使用 ：after 偽類來提供浮動塊后的 clear:both。不同的是，隱藏這個空白使用的是 display: table。而不是設(shè)置 visibility:hidden;height:0;font-size:0; 這樣的 hack。

值得注意的是這里中的 ：before 偽類。其實他是來用處理 top-margin 邊折疊的，跟清理浮動沒有多大的關(guān)系。但因為浮動會創(chuàng)建 block formatting context，這樣浮動元素上的另而一元素上如果剛好有 margin-bottom 而這個浮動元素剛好有margin-top 的話，應(yīng)該讓他們不折疊（雖然這種情況并不常見）。

本文來自成都品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計公司-創(chuàng)新互聯(lián)

網(wǎng)站欄目：怎樣寫更簡潔的CSS清理浮動方式
文章URL：http://muchs.cn/news25/325375.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、電子商務(wù)、面包屑導(dǎo)航、用戶體驗、網(wǎng)站維護(hù)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)