在前端中經常會在佈局方面需要清除浮動，我自己總結了一下，清除浮動的幾種方法，也有清除浮動的原理，這也是面試中經常會問到的。

1.overflow:hidden

父元素設定overflow:hidden屬性

原理：必須定義width或zoom=1，同時不能定義height。使用overflow：hidden會觸發BFC（塊級格式化上下文）/（這裡的BFC會在後面一篇文章詳解），瀏覽器會自動檢查浮動區域的高度。
缺點：不能和position配合使用，因為超出的尺寸會被隱藏。
優點：程式碼量少，簡單。

２.父級div定義偽類：after和zoom

.clearfix
 
:after{
    content:"";
    height:0;
    display:block;
    clear:both;   //清除浮動
    visibility:hidden;
}
.clearfix{
    zoom:1;   // 相容IE
}

原理：IE8以上才支援 :after
優點：不容易出現錯誤
缺點：程式碼多，不易記

3.使用雙偽元素清除浮動

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

缺點：不嚴謹

4.在結尾處加空div標籤：clear:table

在要清浮動的地方的結尾加上一個空div標籤

<div class="clearfloat"></div>
.clearfloat{clear:both;}

原理：新增一個空div，利用css提高clear：both清除浮動，讓父級div能自動獲取高度。

5.父級div定義overflow：auto

原理：必須定義width或zoom：1，使用overflow：auto時，瀏覽器會自動檢查浮動區域的高度。

6.BFC（Block Formatting Contexts）

觸發BFC 的幾種規則：

1. 浮動元素，float除none以外的值
2. 絕對定位元素：position（absolute，fixed）
3. display為以下其中之一：inline-blocks，table-cells，table-captions
4. overflow除visible以外的值：hidden,auto,scroll,inherit（包括IE8都不支援）