對css有了解的朋友肯定都知道盒式模型這個概念，對一個元素設置css，首先需要知道這個元素是block還是inline類型。而BFC就是用來格式化塊級盒子，同樣管理inline類型的盒子還有IFC，以及其他的FC。那首先我們就來看看FC的概念。
Formatting Context：指頁面中一個渲染區域，并且擁有一套渲染規則，他決定了其子元素如何定位，以及與其他元素的相互關系和作用。
BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level Box參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。BFC的生成

既然上文提到BFC是一塊渲染區域，那這塊渲染區域到底在哪，它又是有多大，這些由生成BFC的元素決定，CSS2.1中規定滿足下列CSS聲明之一的元素便會生成BFC。float的值不為none；
overflow的值不為visible；
display的值為inline-block、table-cell、table-caption；
position的值為absolute或fixed；看到有人把display：table也認為可以生成BFC，其實這里的主要原因在于Table會默認生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC。

BFC的約束規則
瀏覽器對于BFC這塊區域的約束規則如下：
生成BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含塊的頂部，倆個相鄰子元素之間垂直距離取決于元素margin特性。在BFC中相鄰的塊級元素外邊距會折疊。
生成BFC元素的子元素中，每一個子元素的外邊距和包含塊的左邊界相接觸，（對于從右到左的格式化，右外邊距和右邊界相接觸），除非這個子元素也創建了一個新的BFC（如它自身也是一個浮動元素）。

有朋友對它做了分解，我們直接拿來：
內部的BOX會在垂直方向上一個接一個的放置；
垂直方向上的距離有margin決定。（完整的說法是：屬于同一個BFC的倆個相鄰的BOX的margin會發生重疊，與方向無關。）
每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此。（這說明BFC中的子元素不會超出它的包含塊，而position為absolute的元素可以超出它的包含塊邊界）；
BFC的區域不會與float的元素區域重疊；
計算BFC的高度時，浮動子元素也參與計算；
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然；

看到以上的幾條約束，讓我想起了學習CSS時的幾條規則：
Block元素會擴展到與父元素同寬，所以block元素會垂直排列；
垂直方向上的倆個相鄰DIV的margin會重疊，而水平方向不會（此規則并不完全正確）；
浮動元素會盡量往左上方（或右下方）；
為父元素設置overflow：hidden或浮動父元素，則會包含浮動元素；
……

BFC在布局中的應用
上面說了那么多，那么BFC究竟有什么用，畢竟再好的東西也要為我所用才行。
防止margin重疊：
同一個BFC中倆個相鄰的box才會發生重疊與方向無關，不過由于上文提到的第一條限制，我們甚少看到水平方向的margin重疊。這在IE這中是個特例，IE可以設置write-mode。
要阻止margin重疊，只要將倆個元素別放在一個BFC中即可（可以用上文提到的方式讓相鄰元素其中一個生成BFC）。阻止倆個相鄰元素的重疊看起來沒有意義，主要用于嵌套元素。

浮動相關問題；
使得父元素包含子元素，常見的方式是為父元素設置overflow：hidden或者浮動父元素。根本原因在于創建BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題。

多欄布局的一種方式
上文提到的一條規則：與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋。利用該特性可以作為多欄布局的一種實現方式。

IE中也有與BFC類似概念的haslayout。

總結
在我第一次接觸BFC時經常有一個疑問，BFC的結構是什么樣的，像DOM一樣的樹狀結構，還是一個BFC集合。其實我們不需要關心BFC的具體結構，這要看瀏覽器的具體實現采用什么樣的數據結構。對于BFC我們只需要知道使用一定的CSS聲明可以生成BFC，瀏覽器對生成的BFC有一系列的渲染規則，利用這些渲染規則我們可以達到一定的布局效果，為了達到特定的布局效果我們讓元素生成BFC。
對于CSS新手來說不建議涉獵BFC，還是應該去看看相應的CSS布局規則，像《CSS設計指南》、《CSS權威指南》這倆本都很不錯，達到一定積累再來看BFC，說不定會有一種豁然開朗的感覺。BFC中幾乎涉及到CSS布局的所有重要屬性，這也是BFC的難點和我們需要掌握BFC的意義所在。此處要說明的是，這篇文章是我幾乎一字不落的抄下來的，因為我對于BFC一竅不通，我認為這樣抄錄一遍對于我理解BFC會有幫助的，但是看到作者說不建議新手涉獵BFC，我就釋然了。參考文獻——我的小樹林

** CSS