BFC

BFC（Block  formatting  context）塊級格式化上下文，是一個獨立的渲染區域。

一、如何觸發BFC：

1、根元素（html）;

2、設置float除none意外的值（left  ,right）;

3、設置overflow 除visible 以外的值（hidden,auto,sroll）；

4、設置display （table-cell,inline-block,flex）;

5、設置position(absolute,fixed)

二、BFC的佈局規則：

1、內部的BOX會在垂直方向，一個接一個的放置；

2、BOX垂直方向的距離由margin決定。同一個BFC的兩個相鄰 BOX的margin會重疊；

3、每個元素的margin box （子元素）的左邊，與包含塊border box（父元素）的左邊相接觸；

4、BFC是頁面上的一個隔離的獨立容器，裡面的子元素不影響外面；

5、計算BFC的高度時，浮動元素也會參與計算；

6、BFC的區域不與float box(浮動的盒子)重疊。

三、BFC的作用：

1、可以解決上下margin重疊問題，給添加margin值的元素再套一個盒子，並設置overflow：hidden；

2、可以解決高度塌陷問題，子元素浮動脫離了正常的文檔流，也脫離了父元素盒子，此時父元素盒子高度為0，給父元素設置overflow:hidden，觸發了BFC，閉合浮動；

3、可以實現多欄佈局，兩個浮動的元素相鄰，剩下一個元素設置overflow:hidden ，觸發BFC。