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