對於BFC（塊級格式上下文）的理解

BDC的規則：

1.BFC高度計算包括浮動元素的高度。（不是BFC的話，只會計算子元素的高度，而不會計算裏面的浮動元素的高度）

<div class="fat">
  <div class="left"></div>
</div>
    

.left {
    width: 100px;
    height: 300px;
    background: yellow;
    float: left;
}

.fat {
    overflow:hidden; //創建BFC
    background:red;
}

此時父元素會忽略浮動的子元素。父元素的高度爲0,因爲裏面沒有子元素撐開父元素的高度。

如果給父元素創建一個BFC，那麼就會將浮動元素的高度計算進父元素的高度。

2.BFC的區域不會與float box重疊

<div>
    <div class="left"></div>
    <div class="right"></div>
</div> 

.left {
    width:100px;
    height:200px;
    background:yellow;
    float:left;
}

.right {
    height:300px;
    background:red;
    overflow:hidden; //創建BFC
}

此時right只是一個普通的子元素，他會與float box重疊在一起。

當我們給right創建BFC，那麼他就不會與float box重疊在一起了

3.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。通過將其中一個box創建BFC就可以實現margin不重疊。

4.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

如何觸發BFC

1. float屬性不爲none
2. 設置overflow除了visible之外的值（hidden，scroll，auto）
3. position的值爲absolute或者fixed
4. 設置display：flex || inline-flex 元素的直接子元素
5. 根元素
6. 設置display：inline-block