BFC

BFC的基本概念: 通俗的講，就是一個特殊的塊，內部有本身的佈局方式，不受外邊元素的影響。

BFC原理:

1. BFC內部的盒子，會在垂直方向，一個接一個地放置。垂直方向上也會發生邊距重疊。
2. BFC就是頁面上的一個獨立容器，容器裏面的子元素不會影響到外面的元素，外邊的也不會影響裏邊的。
3. BFC的區域不會與float box重疊。
4. 計算BFC的高度時，浮動元素也被計算在內。

BFC如何產生:

在box屬性值爲這些的狀況下，都會讓所屬的box產生BFC。

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

BFC的使用場景

1. 能夠用來自適應佈局

2.能夠清除浮動

3.解決垂直邊距重疊