清除浮動的幾種方法

好文推薦：浮動和它的工作原理？清除浮動的技巧？

下面這兩種方法對於清除浮動都是不錯的選擇，首先我們要知道清楚浮動一般都是在父元素上清楚浮動，即發生浮動的都是子元素，如何這個父元素要浮動，那我們就在這個父元素上再新增乙個父元素。

方法一：

其中.chearfix是包含浮動的父元素。

清理浮動

*/.clearfix:after

.clearfix

// 這個一般是用於ie的，不用做過多的了解

舉例如下所示：

未清除浮動的**如下：

"en
">class="
clearfix
">
class="
float_left
">這是在左邊浮動的div
class="
float_right
">這是在右邊浮動的div
class="
p">這是在浮動下面的文字

view code

效果如下：

我們可以看到class為chearfix的div高度為0，並沒有被其中的兩個浮動的div撐開。且在clearfix下面的包含文字的div受影響到了最上面。

於是我們再class為chrarfix的div的樣式中新增上述清除浮動的**，**如下：

"en
">class="
clearfix
">
class="
float_left
">這是在左邊浮動的div
class="
float_right
">這是在右邊浮動的div
class="
p">這是在浮動下面的文字

view code

效果如下：

這時我們發現clearfix的div已經被撐開，並且此div下面的div（即包含文字的div）也正常排在了最下面。

其原理是，在「高階」瀏覽器中使用 :after 偽類在浮動塊後面加上乙個非 display:none 的不可見塊狀內容來，並給它設定 clear:both 來清理浮動。在 ie6 和 7 中給浮動塊新增 haslayout 來讓浮動塊撐高並正常影響文件流。

方法二：

其中的.clearfix同樣適用於包含浮動元素的父元素。**如下:

.clearfix:before, .clearfix:after

.clearfix:after

.clearfix

原理還是一樣的。使用 :after 偽類來提供浮動塊後的 clear:both。不同的是，隱藏這個空白使用的是 display: table。而不是設定 visibility:hidden;height:0;font-size:0; 這樣的 hack。值得注意的是這裡中的 :before 偽類。其實他是來用處理 margin-top 邊摺疊的，跟清理浮動沒有多大的關係。但因為浮動會建立 block formatting context （bfc），這樣浮動元素上的另而一元素上如果剛好有 margin-bottom 而這個浮動元素剛好有margin-top 的話，應該讓他們不摺疊（雖然這種情況並不常見）。所以直接寫成下面的形式即可；

.clearfix.wrap:after

.clearfix

總結：

"en
">class="
header
">
class="
content
">
class="
left
">
class="
right
">
class="
footer
">

上面的三種方法都可以，其中我比較推薦第二種。

清除浮動的幾種方法

清除浮動的幾種方法

清除浮動的幾種方法

清除浮動的幾種方法

相關推薦