### BFC（Block Formatting Context） FC 即格式上下文，它定義框內部的元素渲染規則，比較抽象，譬如 ``` FC 像是一個大箱子，里面裝有很多元素 箱子可以隔開里面的元素和外面的元素（所以外部并不會影響FC內部的渲染） 內部的規則可以是：如何定位，寬高計算，margin 折疊等等 ``` 不同類型的框參與的 FC 類型不同，譬如塊級框對應 BFC，行內框對應 IFC **注意，并不是說所有的框都會產生 FC，而是符合特定條件才會產生，只有產生了對應的FC后才會應用對應渲染規則** **BFC規則：** ``` 在塊格式化上下文中 每一個元素左外邊與包含塊的左邊相接觸（對于從右到左的格式化，右外邊接觸右邊） 即使存在浮動也是如此（所以浮動元素正常會直接貼近它的包含塊的左邊，與普通元素重合） 除非這個元素也創建了一個新的 BFC ``` 總結幾點 BFC 特點： 1. 內部 `box` 在垂直方向，一個接一個的放置 2. box 的垂直方向由 `margin` 決定，屬于同一個 BFC 的兩個 box 間的 margin 會重疊 3. BFC 區域不會與 `float box` 重疊 (可用于排版) 4. BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此 5. 計算 BFC 的高度時，浮動元素也參與計算（不會浮動坍塌） 如何觸發 BFC？ 1. 根元素 2. `float` 屬性不為 `none` 3. `position` 為 `absolute` 或 `fixed` 4. `display` 為 `inline-block`， `flex`， `inline-flex`，`table`， `table-cell`， `table-caption` 5. `overflow` 不為 `visible` 這里提下，`display: table` ，它本身不產生 BFC，但是它會產生匿名框（包含 `display: table-cell` 的框），而這個匿名框產生BFC 。