BFC-塊格式化上下文（block formatting context）

BFC概念

BFC（block formatting context）塊格式化上下文， 是Web頁面塊級元素佈局及浮動元素彼此交互的區域。BFC是一個獨立的佈局環境，（實際頁面渲染時是不可見的），由BFC構建的區域其內部元素的佈局是不受外界的影響的，利用這個特性可用來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。在BFC中元素從頂端開始垂直地一個接一個地排列，兩個元素之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級元素的垂直外邊距會產生摺疊。（後面詳細解釋）

造成BFC的條件：

1.浮動、絕對定位、fixed定位，這些方式都能讓元素脫離文檔流造成獨立的BFC。
2.display:inline-block/table-cells/table-captions/inline-flex（非塊級元素的塊容器元素）
3.overflow:auto/hidden/scroll
overflow屬性自己並無什麼特別之處，可是是會產生BFC創造獨立佈局環境，使元素不受浮動元素的影響。

使用BFC清除浮動效果示例：

BFC的做用：

1.清除浮動帶來的反作用（將浮動限定在BFC區域中）
2.撐開父元素（包住浮動元素） 清除浮動就是撐開父元素
3.阻止外邊距合併
4.BFC獨立性可用來佈局

關於margin合併

margin合併出現的三個場景：

1.同一個BFC環境中，處於普通文檔流中的垂直相鄰元素的外邊距合併。

2.父子元素的外邊距合併。

3.空元素自身的外邊距合併。

若是這個外邊距遇到另外一個元素的外邊距，它還會發生合併

margin合併規則：

1.兩個margin都是正值的時候，取二者的最大值；
2.當 margin 都是負值的時候，取的是其中絕對值較大的，而後，從0位置，負向位移；
3.當有正有負的時候，先取出負 margin 中絕對值中最大的，而後和正 margin 值中最大的 margin 相加。
全部毗鄰的margin要一塊兒參與運算，不能分步進行。

阻止相鄰元素外邊距合併的方法：

1.被非空內容、padding、border 或 clear 分隔開。
2.不在一個普通流中或用BFC分割開。
3.讓margin在垂直方向上不毗鄰。