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