什么是BFC?

BFC 全稱為 塊級(jí)格式化上下文（Block Fromatting Context），是Web頁面的可視化CSS渲染出的一部分。它是塊級(jí)盒布局出現(xiàn)的區(qū)域，也是浮動(dòng)層元素進(jìn)行交互的區(qū)域。簡(jiǎn)單的來說，它就是一種會(huì)影響元素與元素之間的位置、間距的屬性。

BFC 的特性?

1.內(nèi)部的box會(huì)在垂直方向，從頂部一個(gè)接一個(gè)的放置

2.box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生疊加

3.每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸

4.BFC的區(qū)域不會(huì)與float box疊加

5.BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然

6.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算

形成BFC的條件?

1.float：給元素添加浮動(dòng)（left，right）

2.position：給元添加定位（absolute，fixed）

3.display：給元素添加display（inline-block，table-cells，table-captions）

4.overflow：給元素添加overflow（hidden，auto，scroll）

BFC形成后出現(xiàn)的常見問題?

1.margin重疊問題

2.浮動(dòng)相關(guān)問題

BFC可以解決的問題?

1.margin疊加的問題，要阻止margin重疊，只要將兩個(gè)元素別放在一個(gè)BFC中即可

2.對(duì)于左右布局的元素，我們可以給右側(cè)的元素添加overflow :hidden或auto，左側(cè)的是float：left

3.可以清除浮動(dòng)，計(jì)算BFC高度，浮動(dòng)元素不會(huì)撐開父元素的高度，我們可以讓父元素觸發(fā)BFC，即：使用overflow:hidden;