BFC是什麼？

BFC：頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之亦然
觸發條件：

• float的值不是none
• position的值不是static或relative
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible
  解決的問題：避免margin的重疊(屬於同一個BFC的兩個相鄰的BOX會發生margin重疊)，自適應兩欄佈局(BFC的區域不會與float box重疊)，清除浮動(計算BFC的高度時，浮動元素也參與計算)

BFC佈局規則

1. 內部的Box會在垂直方向，一個接一個地放置。

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

3. 每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。

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

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

6. 計算BFC的高度時，浮動元素也參與計算。