CSS BFC(Block Formatting Context)，bfcformatting

CSS BFC(Block Formatting Context)，bfcformatting

BFC的定義
是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。
在建立了 Block Formatting Context 的元素中，其子項目會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 ‘margin’ 特性。在 Block Formatting Context 中相鄰的區塊層級元素的垂直邊距會摺疊（collapse）。

在 Block Formatting Context 中，每一個元素左外邊與包含塊的左邊相接觸（對於從右至左的格式化，右外邊接觸右邊）， 即使存在浮動也是如此（儘管一個元素的內容地區會由於浮動而壓縮），除非這個元素也建立了一個新的 Block Formatting Context 。

BFC到底是什嗎？

當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子項目的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這裡有點類似一個BFC就是一個獨立的行政單位的意思。

怎樣才能形成BFC

• float的值不為none。
• overflow的值不為visible。
• display的值為table-cell, table-caption, inline-block中的任何一個。
• position的值不為relative和static。

BFC的作用1.不和浮動元素重疊

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

1 <div style="float:left; border: 2px solid red"> 123</div>2 <p style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1">3 The quick brown fox jumped over the lazy dog's back.4 The quick brown fox jumped over the lazy dog's back.5 The quick brown fox jumped over the lazy dog's back.6 The quick brown fox jumped over the lazy dog's back.7 </p>

2.清除元素內部浮動

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

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

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

因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對於兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對於嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子項目的margin就不會和父元素的margin發生重疊了。