深入分析CSS布局中BFC及例子應用

1、什麼是BFC

BFC(Block Formatting Context，區塊層級元素格式化上下文)是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。

通俗講，BFC就是一種布局方式，在建立了 BFC後，其子項目會一個接一個地放置：盒子們自所在的 containing block 頂部起，水平方向上一個接一個撐滿整個寬度，垂直方向上他們的起點是包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 ‘margin’ 特性。在 同一個BFC中，兩個元素才有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有間隔(即父元素的邊框，非空內容，padding等)就會發生margin重疊，即margin會發生重合。更重要的是：建立BFC,能消除元素對相鄰元素的布局影響，常見的應用 是：使用overflow:hidden建立BFC ,來清除浮動元素對後面元素的布局影響 。
2、如何建立BFC

當一個HTML元素滿足下麵條件的任何一點，都可以產生BFC：

float的值不為”none” (如：float:left/right)

overflow的值不為”visible”(如：overflow:hidden)

display的值為 “table-cell”, “table-caption”, or “inline-block”中的任何一個

position的值不為 “static” 或 “relative”中的任何一個(如：position:absolute)
3、BFC的作用

1.不和浮動元素重疊

如果一個浮動元素後面跟著一個非浮動的元素，那麼就會產生一個覆蓋的現象，很多自適應的兩欄布局就是這麼做的。比如下圖的效果，參考例子:

代碼如下

複製代碼

<style> *{margin: 0;padding: 0;} .userinfo{width: 200px;height: 200px;background-color: #f00;color: #fff;overflow: hidden;padding: 10px;_zoom:1;} .userinfo a{width: 80px;height: 80px;background-color: #080;float: left;margin-right: 5px;} .userinfo .txt{overflow: hidden;line-height: 20px;padding: 0 5px;*zoom: 1;}/* overflow: hidden;觸發bfc;zoom: 1;觸發ie的haslayout以達到同bfc一樣的顯示效果 */ </style> <div> <a href="#"><img src="" alt="帳戶圖片" /></a> <div> <p>您好， <b>xxxx</b></p> <p>一段文字描述！一段文字描述！一段文字描述！一段文字描述！</p> </div> </div>

2.清除元素內部浮動

只要把父元素設為BFC就可以清理子項目的浮動了，最常見的用法就是在父元素上設定overflow: hidden樣式，對於IE6加上zoom:1就可以了(IE Haslayout)。

3.嵌套元素Margin邊距摺疊問題的解決

按照BFC的定義，只有同屬於一個BFC時，兩個元素才有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如沒有邊框，非空內容，padding等)就會發生margin重疊。

因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，只要把父元素設為BFC就可以了。這樣子項目的margin就不會和父元素的margin發生重疊了。