欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

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

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

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

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

上面的代碼應該是現(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。而不是設置 visibility:hidden;height:0;font-size:0; 這樣的 hack。

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

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

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

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

廣告

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

h5響應式網(wǎng)站建設