細談清除浮動的幾種方法

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

1.overflow:hidden

父元素設定overflow:hidden屬性

原理：必須定義width或zoom=1，同時不能定義height。使用overflow：hidden會觸發BFC（塊級格式化上下文）/（這裡的BFC會在後面一篇文章詳解），浏覽器會自動檢查浮動區域的高度。

缺點：不能和position配合使用，因為超出的尺寸會被隐藏。

優點：代碼量少，簡單。

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

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

原理：IE8以上才支援 :after

優點：不容易出現錯誤

缺點：代碼多，不易記

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

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

缺點：不嚴謹

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都不支援）