清除浮動的方法總結

清除浮動的原因：

浮動的元素不占位置，在标準流中寬高為0，不能撐開父盒子，由于這種原因，則會導緻下方的标準流盒子上移，會被上方未清除浮動的盒子覆寫，影響頁面的布局

清除浮動的幾種方法：

方法一：

給浮動的盒子的父盒子添加一個高度，因為浮動盒子不能撐開父盒子，那麼我們給父盒子加上高度就從根本上解決了這一個問題，

缺點：圖檔浮動，給定圖檔盒子一個寬度，導緻其高度是等比例縮放的，這一個高度值有很大的幾率是很難計算出來的，這種情況就不能使用手動給定高度這一方法

方法二：

額外标簽法，

在父盒子中，所有的浮動盒子之後添加一個額外的标簽，

.clear { clear: both; } 缺點，一個頁面可能有很多地方需要清除浮動，這樣就需要使用很多無用的标簽

方法三：

給浮動盒子的父盒子也使用浮動，這樣浮動的盒子就能撐開其父盒子

缺點：雖然給父盒子使用浮動能夠達到清除内部浮動元素的目的，但是整體浮動同樣會影響到頁面的布局

方法四：

使用CSS的overflow屬性

給浮動盒子的父盒子添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設定容器寬高或設定 zoom:1。

在添加overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

方法五：

使用CSS的:after僞元素

結合 :after 僞元素（注意這不是僞類，而是僞元素，代表一個元素之後最近的元素）和 IEhack ，可以完美相容目前主流的各大浏覽器，這裡的 IEhack 指的是觸發 hasLayout。

給浮動元素的容器添加一個clearfix的class，然後給這個class添加一個:after僞元素實作元素末尾添加一個看不見的塊元素（Block element）清理浮動。

.clearfix:after{

content: “”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

zoom: 1;

}

五星推薦使用

總結

通過上面的例子，我們不難發現清除浮動的方法可以分成兩類：

一是利用 clear 屬性，包括在浮動元素末尾添加一個帶有 clear: both 屬性的空 div 來閉合元素，其實利用 :after 僞元素的方法也是在元素末尾添加一個内容為一個點并帶有 clear: both 屬性的元素實作的。

二是觸發浮動元素父元素的 BFC (Block Formatting Contexts, 塊級格式化上下文)，使到該父元素可以包含浮動元素，關于這一點。