一、什麼是BFC
BFC(block formatting context）：簡單來說，BFC 就是一種屬性，這種屬性會影響着元素的定位以及與其兄弟元素之間的相互作用。
中文常譯爲塊級格式化上下文。是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。 在進行盒子元素佈局的時候，BFC提供了一個環境，在這個環境中按照一定規則進行佈局不會影響到其它環境中的佈局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。 也就是說，如果一個元素符合了成爲BFC的條件，該元素內部元素的佈局和定位就和外部元素互不影響(除非內部的盒子建立了新的 BFC)，是一個隔離了的獨立容器。（在 CSS3 中，BFC 叫做 Flow Root）
二、 形成 BFC 的條件
1、浮動元素，float 除 none 以外的值；
2、絕對定位元素，position（absolute，fixed）；
3、display 爲以下其中之一的值 inline-blocks，table-cells，table-captions；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）
三、BFC常見作用
1、包含浮動元素
問題案例：高度塌陷問題：在通常情況下父元素的高度會被子元素撐開，而在這裏因爲其子元素爲浮動元素所以父元素髮生了高度坍塌，上下邊界重合。這時就可以用bfc來清除浮動了。
這裏寫圖片描述
2、不被浮動元素覆蓋
問題案例： div浮動兄弟遮蓋問題：由於左側塊級元素髮生了浮動，所以和右側未發生浮動的塊級元素不在同一層內，所以會發生div遮擋問題。可以給藍色塊加 overflow: hidden，觸發bfc來解決遮擋問題。
這裏寫圖片描述
3、 BFC 會阻止外邊距摺疊
問題案例：margin塌陷問題：在標準文檔流中，塊級標籤之間豎直方向的margin會以大的爲準，這就是margin的塌陷現象。可以用overflow：hidden產生bfc來解決。
這裏寫圖片描述