HTML 中BFC的理解

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合並等等，因此，有了這個特性，我們布局的時候就不會出現意外情況了。

display 屬性為 block, list-item, table 的元素，會產生BFC.

給這些元素添加如下屬性就可以觸發BFC。

-float屬性不為none

-position為absolute或fixed

-display為inline-block, table-cell, table-caption, flex, inline-flex

-overflow不為visible。

BFC布局規則特性：

1.在BFC中，盒子從頂端開始垂直地一個接一個地排列.

2.盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊

3.在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。

1. BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
2. 計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。

它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，並且與這個區域外部毫不相干。