什麼是BFC?
BFC指的是Block Formatting Context，它提供了一個環境， html元素在這個環境中按照一定規則進行佈局。一個環境中的元素不會影響到其他環境中的佈局，決定了元素如何對其內容進行定位，以及和其他元素的關係和相互作用。
其中：FC(Formatting Context)指的是頁面中的一個渲染區域，並且擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關係和作用。
塊級格式化上下文，指的是一個獨立的塊級渲染區域， 只有block-level box參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。
BFC的生成
- float的值不爲none；
- overflow的值不爲visible；
- display的值爲 inline-block, table-cell, table-caption；
- position的值爲absolute或fixed；
BFC的約束規則
生成BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素外邊距會摺疊。
生成BFC元素的子元素中，每一個子元素做外邊距與包含塊的左邊界相接觸，（對於從右到左的格式化，右外邊距接觸右邊界），即使浮動元素也是如此（儘管子元素的內容區域會由於浮動而壓縮），除非這個子元素也創建了一個新的BFC（如它自身也是一個浮動元素）。
內部的Box會在垂直方向上一個接一個的放置。
垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊，與方向無關。）
每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position爲absolute的元素可以超出他的包含塊邊界）。
BFC的區域不會與float的元素區域重疊。
計算BFC的高度時，浮動子元素也參與計算。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然。
BFC在佈局中的應用
不和浮動元素重疊：如果一個浮動元素後面跟着一個非浮動元素, 就會產生覆蓋。
防止margin重疊：同一個BFC中的兩個相鄰Box纔會發生重疊與方向無關，不過由於上文提到的第一條限制，我們甚少看到水平方向的margin重疊。這在IE中是個例外，IE可以設置write-mode。