BFC 塊格式化上下文
摘要：
塊格式化上下文（Block Formatting Context，BFC）是 Web 頁面的視覺化 CSS 渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素互動的區域。
具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在佈局上影響到外面的元素，並且 ...
塊格式化上下文（Block Formatting Context，BFC）是 Web 頁面的視覺化 CSS 渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素互動的區域。
具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在佈局上影響到外面的元素，並且 BFC 具有普通容器所沒有的一些特性。
通俗一點來講，可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。
在一個塊格式化上下文中，每個盒的 left 外邊（left outer edge）挨著包含塊的 left 邊（對於從右向左的格式化，right 邊挨著）。即使存在浮動（儘管一個盒的行盒可能會因為浮動收縮），這也成立。除非該盒建立了一個新的塊格式化上下文。（這種情況下，該盒自身可能會因為浮動變窄）
觸發 BFC
下列方式會建立塊格式化上下文：
- 根元素或包含根元素的元素；
- 浮動元素（元素的
float不是none）； - 絕對定位元素（元素的
position為absolute或fixed）； - 行內塊元素（元素的
display為inline-block）； - 表格單元格（元素的
display為table-cell，HTML 表格單元格預設為該值）； - 表格標題（元素的
display為table-caption，HTML 表格標題預設為該值）； - 匿名錶格單元格元素（元素的
display為table、table-row、table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的預設屬性）或inline-table）； -
overflow值不為visible的塊元素； -
display值為flow-root的元素； （無任何副作用） -
contain值為layout、content或strict的元素； - 彈性元素（
display為flex或inline-flex元素的直接子元素）； - 網格元素（
display為grid或inline-grid元素的直接子元素）； - 多列容器（元素的
column-count或column-width不為auto，包括column-count為 1）； -
column-span為all的元素始終會建立一個新的BFC，即使該元素沒有包裹在一個多列容器中。
應用 BFC
讓浮動內容和周圍的內容等高
由於層疊順序，會使得浮動元素與周圍的內容不等高，造成 bug：
應用 BFC 讓浮動內容和周圍的內容等高。
html 程式碼如下：
<div class="parent"> <div class="child"></div> </div> 複製程式碼
css 程式碼如下：
.parent {
border: 2px solid black;
display: flow-root;// 觸發 BFC
}
.child {
height: 100px;
width: 100px;
background: red;
float: left;
}
複製程式碼
阻止元素被浮動元素覆蓋
由於層疊順序，使得浮動元素的 z 軸在文字內容和塊級元素之間，造成浮動元素覆蓋塊級元素卻不覆蓋文字內容的 bug。(當然，浮動屬性被設計的原因便是需要文字環繞在被浮動的圖片周圍，給論文排版以便利)
應用 BFC 阻止元素被浮動元素覆蓋，將兩個元素徹底分離開。
html 程式碼如下：
<div class="left">左</div> <div class="right">右</div> 複製程式碼
css 程式碼如下：
.left {
border: 2px solid red;
height: 200px;
width: 100px;
float: left;
}
.right {
border: 2px solid green;
height: 200px;
background: green;
display: flow-root;// 觸發 BFC
}
複製程式碼
外邊距塌陷
在一個塊格式化上下文中，盒在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由 margin 屬性決定，同一個塊格式化上下文中的相鄰塊級盒之間的豎直 margin 會合並。