請注意閉合浮動元素讓我們的CSS代碼更規(guī)范

2024-07-11 08:23:23

字體：大中小

供稿：網(wǎng)友

按照CSS規(guī)范，浮動元素（floats）會被移出文檔流，不會影響到塊狀盒子的布局而只會影響內(nèi)聯(lián)盒子（通常是文本）的排列。因此當(dāng)其高度超出包含容器時，一般父容器不會自動伸長以閉合浮動元素。但是有時我們卻需要這種自動閉合行為，具體如何處理呢？

有一種做法就是在父容器內(nèi)再插入一個額外的標(biāo)簽，并令其清除浮動（clear）以撐大父容器。這種方法瀏覽器兼容性好，沒有什么問題，缺點(diǎn)就是需要額外的（而且通常是無語義的）標(biāo)簽，所以我個人不大喜歡。后來又有了一種新的方式，使用 :after 偽類動態(tài)的嵌入一個用于清除浮動的元素，這種方法和上一種原理一樣，不同的只是把這個額外的內(nèi)容用 CSS 生成，但考慮到 IE 不支持 :after 不得不做了不少的 hack。這種方法兼容性一般，但經(jīng)過各種 hack 也可以應(yīng)付不同瀏覽器了，同時又可以保證 html 比較干凈，所以用得還是比較多的。再后來又有人發(fā)現(xiàn)將父容器的 overflow 設(shè)為除 visible 之外的值就可以在標(biāo)準(zhǔn)兼容瀏覽器中閉合浮動元素，IE自然又是不支持的，所以這種方法和上一種方法一樣都對 IE 做了不同處理（具體就是觸發(fā)layout），不同的就是overflow 沒有 :after 偽類那么麻煩了，缺點(diǎn)也有，overflow 可能會產(chǎn)生一些小沖突。在使用 overflow 之前還有過一種使用 float 的方法，就是讓父容器也浮動，這利用到了浮動元素的一個特性――浮動元素會閉合浮動元素。這種方式在 IE/Win 和標(biāo)準(zhǔn)兼容瀏覽器中都有較好的效果，但缺點(diǎn)也很明顯――父容器未必想浮動就浮動的了，究竟浮動是一種比較非凡的行為，有時布局不答應(yīng)其浮動也很正常。使用 float 雖然在 IE 和標(biāo)準(zhǔn)兼容瀏覽器中都能閉合浮動元素，但原理卻是不同的，IE/Win 中 float 觸發(fā)了 layout 因而閉合了浮動，而在標(biāo)準(zhǔn)兼容瀏覽器中，float 其實(shí)和上一種方法中的 overflow 原理一樣，產(chǎn)生了一個“塊級格式化范圍”――這是CSS 規(guī)范中提到的一種現(xiàn)象，它往往具有某種獨(dú)立性，特性之一就是會自動閉合內(nèi)部的浮動元素。

按照規(guī)范，以下類型的元素會產(chǎn)生一個塊級格式化范圍：

示例代碼 [www.CuoXIn.com]

上一篇：對display:inline與float:left正確含義的認(rèn)識！

下一篇：多彩文字(MultiColoredText)的制作Clip屬性