BFC 的形成和作用
作者：HZFEStudio
來源：SegmentFault 思否社區(qū)
完整高頻題庫倉庫地址：
https://github.com/hzfe/awesome-interview
完整高頻題庫閱讀地址：
https://hzfe.github.io/awesome-interview/
相關(guān)問題
BFC 有什么用，如何觸發(fā)
談?wù)勀銓?BFC 的理解
回答關(guān)鍵點
盒模型 視覺格式化模型 包含塊 正常流<html> 根元素。
float 的值不為 none。
position 的值不為 relative 或 static。
overflow 的值不為 visible 或 clip（除了根元素）。
display 的值為 table-cell，table-caption，或 inline-block 中的任意一個。
display 的值為 flow-root，flow-root，或 list-item。
flex items，即 display 的值為 flex 或 inline-flex 的元素的直接子元素（該子元素 display 不為 flex，grid，或 table）。
grid items，即 display 的值為 grid 或 inline-grid 的元素的直接子元素（該子元素 display 不為 flex，grid，或 table）。
contain 的值為 layout，content，paint，或 strict 中的任意一個。
column-span 設(shè)置為 all 的元素。
display: flow-root，contain: layout 等是無副作用的，可在不影響已有布局的情況下觸發(fā) BFC。知識點深入
1. 前置知識點
box（盒子）：一個抽象概念，在畫布上占據(jù)一塊空間，通常由元素（element）生成。一個元素可能生成多個盒子（如偽元素、list-item 元素）。
principal box（主要盒子）：元素生成的多個盒子中，用來包含它的后代盒子和它生成的內(nèi)容的盒子，也是參與任何定位方案的盒子。
block-level box（塊級盒子）：參與 BFC 布局的盒子，通常由塊級元素生成。
block container box（塊容器）：在 CSS2.2 中，除了 tabel box 或替換元素的主要盒子，一個塊級盒子也是塊容器，但不是所有的塊容器都是塊級盒子（如非替換內(nèi)聯(lián)塊盒子）。塊容器主要側(cè)重于其子元素的定位、布局。
block box（塊盒子）：如果一個塊級盒子同時也是塊容器，則可以稱作塊盒子。
block（塊）：當沒有歧義時，作為 block box, block-level box 或 block container box 的簡寫。
2. 視覺格式化模型（visual formatting model）
2.1 包含塊（containing block）
2.2 正常流（normal flow）
2.3 格式化上下文（formatting context）
塊級格式化上下文（BFC，block formatting context）。
內(nèi)聯(lián)格式化上下文（IFC，inline formatting context）。
彈性格式化上下文（FFC，flex formatting context），在 CSS3 中定義。
柵格格式化上下文（GFC，grid formatting context），在 CSS3 中定義。
2.4 獨立格式化上下文（independent formatting context）
2.5 塊級格式化上下文規(guī)范及解析
浮動元素，絕對定位元素，不是塊級盒子的塊級容器（如 inline-block，table-cells，table-captions）以及 overflow 值不為 visible 的塊級盒子，都會為他們的內(nèi)容創(chuàng)建 BFC（注：觸發(fā) BFC 的條件）。
在 BFC 中，盒子從包含塊的頂部開始，在垂直方向上一個接一個的排列。相鄰盒子之間的垂直間隙由它們的 margin 值決定。在同一個 BFC 中，相鄰塊級盒子的垂直外邊距會合并（注：參與 BFC 布局的都是塊級元素）。
在 BFC 中，每一個盒子的左外邊緣（margin-left）會觸碰到包含塊的左邊緣。即使是存在浮動元素也是如此，除非該盒子建立了一個新的 BFC。
BFC 內(nèi)外互不影響。
BFC 包含內(nèi)部的浮動（解決內(nèi)部浮動元素導致的高度塌陷）。
BFC 排斥外部的浮動（觸發(fā) BFC 的元素不會和外部的浮動元素重疊）。
外邊距折疊的計算不能跨越 BFC 的邊界。
各自創(chuàng)建了 BFC 的兄弟元素互不影響（注：在水平方向上多個浮動元素加一個或零個觸發(fā) BFC 的元素可以形成多列布局）。
參考資料
塊級格式化上下文
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
包含塊：MDN
https://developer.mozilla.org/en-US/docs/web/css/containing_block
包含塊：W3C
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details
視覺格式化模型：MDN
https://developer.mozilla.org/en-US/docs/web/css/visual_formatting_model
視覺格式化模型：W3C
https://www.w3.org/TR/CSS22/visuren.html
盒模型：MDN
https://developer.mozilla.org/en-US/docs/web/css/css_box_model/introduction_to_the_css_box_model
盒模型：W3C
https://www.w3.org/TR/CSS22/box.html
