BFC渲染規則

BFC：Block formatting context，官網上的定義是這樣的：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

在BFC中，在豎直方向上，子元素表明的盒子自包含塊頂部依次排列。兩個盒子之間的垂直的間隙是由他們的 margin 值所決定的，兩個相鄰的塊級盒子的垂直外邊距會發生融合（疊加）；在水平方向上，每個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣（border-left）（對於從右到左的格式來講，則觸碰到右邊緣），即便存在浮動也是如此，除非這個盒子建立一個新的塊級格式化上下文。

應用了BFC的盒子就是一個獨立的盒子，它規定了內部的 block-level box 如何佈局，而且這個獨立盒子裏的佈局不受外部影響，也不會影響到外面的元素。

如何觸發BFC？

1. 浮動元素，float 除 none 之外的值
2. 絕對定位元素，position（absolute，fixed）
3. 非塊級盒子的塊級容器，例如：inline-blocks, table-cells, and table-captions。
4. overflow 值不爲 visible 的塊級盒子。

因爲浮動元素與絕對定位元素脫離文檔流，會對頁面其餘元素的佈局產生影響，因此咱們最好經過設置overflow：hidden的方式觸發BFC

ps

塊級盒子：每一個塊級元素（display屬性值爲block，table，list-item）生成一個主要的塊級盒(Principal Block-level Box)來包含其後代盒和生成的內容。同時參與定位體系 Positioning Scheme 。某些塊級元素還會在主要盒以外產生額外的盒： list-item 元素。這些額外的盒會相對於主要盒來擺放。

具體參考連接：http://www.javashuo.com/article/p-gpwjxyjs-e.html；https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model，包含塊

  BFC應用

解決margin重疊問題: 垂直相鄰的兩個外邊距中較小的一個會被較大的一個合併。

例如，兩個p 元素之間的 margin 爲 50px，此時發生了外邊距疊加。要解決這個疊加問題，即讓每一個 p 元素之間的 margin 是 100px，應該怎麼辦？咱們能夠給 每一個p 元素添加一個父元素，讓並它觸發 BFC。

清除 float 浮動，解決高度坍塌

與position：absolute、position：relative元素在BFC中不佔有位置不一樣，float元素在BFC中實際上是實際佔有空間的。

實現特殊佈局，如兩欄佈局與三欄佈局

參考文檔：

https://www.w3.org/TR/CSS21/visuren.html#inline-formatting

https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model

https://blog.duan-ya.com/article/2017-01-22/132