什么是BFC？
BFC 全稱為 塊級格式化上下文（Block Fromatting Context），是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。簡單的來說，它就是一種會影響元素與元素之間的位置、間距的屬性。
BFC 的特性
1.內部的box會在垂直方向，從頂部一個接一個的放置
2.box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰box的margin會發生疊加
3.每個元素的margin box的左邊，與包含塊border box的左邊相接觸
4.BFC的區域不會與float box疊加
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然
6.計算BFC的高度時，浮動元素也會參與計算
形成BFC的條件
1.float：給元素添加浮動（left，right）
2.position：給元添加定位（absolute，fixed）
3.display：給元素添加display（inline-block，table-cells，table-captions）
4.overflow：給元素添加overflow（hidden，auto，scroll）
BFC形成后出現的常見問題
1.margin重疊問題
2.浮動相關問題
BFC可以解決的問題
1.margin疊加的問題，要阻止margin重疊，只要將兩個元素別放在一個BFC中即可
2.對於左右布局的元素，我們可以給右側的元素添加overflow :hidden或auto，左側的是float：left
3.可以清除浮動，計算BFC高度，浮動元素不會撐開父元素的高度，我們可以讓父元素觸發BFC，即：使用overflow:hidden;