BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域受啥，只有Block-level box參與饮潦， 它規(guī)定了內(nèi)部的Block-level Box如何布局银觅，并且與這個區(qū)域外部毫不相干首繁。
BFC的布局規(guī)則
內(nèi)部的Box會在垂直方向，一個接一個地放置哨查。
Box垂直方向的距離由margin決定逗抑。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
每個盒子（塊盒與行盒）的margin box的左邊寒亥，與包含塊border box的左邊相接觸(對于從左往右的格式化邮府，否則相反)。即使存在浮動也是如此溉奕。
BFC的區(qū)域不會與float box重疊褂傀。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素加勤。反之也如此仙辟。
計算BFC的高度時，浮動元素也參與計算鳄梅。
如何創(chuàng)建BFC
1叠国、float的值不是none。
2戴尸、position的值不是static或者relative粟焊。
3、display的值是inline-block孙蒙、table-cell项棠、flex、table-caption或者inline-flex
4挎峦、overflow的值不是visible
BFC的作用
1.利用BFC避免margin重疊香追。
2.自適應兩欄布局
3.清除浮動。
overflow:hidden
參考：
https://blog.csdn.net/sinat_36422236/article/details/88763187
