如何理解BFC-塊格式化上下文（圖文）

本篇文章分享給大家的內容是關於如何理解BFC-塊格式化上下文（圖文），內容很詳細，接下來我們就來看看具體的內容，希望可以協助到大家。

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在垂直方向上不毗鄰。