BFC直譯為“塊級格式化上下文”。它是一個獨立的渲染區域;只有Block-level box參與，它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
布局規則：
A，內部的BOX會在垂直方向，一個接一個地放置。
B，Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰BOX的margin會發生重疊。
C，每個元素的MARGIN BOX的左邊，與包含塊border box的左邊相接觸（對于從左往右的格式化，否則相反）。即使存在浮動也是如此。
D，BFC的區域不會與float box重疊。
E，BFC就是頁面上一個隔離的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
F，計算BFC的高度時，浮動元素也參與計算。
哪些元素會生成BFC
A，根元素
B，float屬性不為none
C，position為absolute或fixed
D，display為inline-block,table-cell,table-caption,flex,inline-flex
F，overflow不為visible
