浮動份名，絕對定位元素，inline-blocks,table-cells,table-captions,和overflow的值不為visible的元素妓美，（除了這個值已經(jīng)被傳到了視口的時候）將創(chuàng)建一個新的塊級格式化上下文僵腺。
一個BFC是一個HTML盒子并且至少滿足下列條件中的任何一個：
?浮動元素（float: left | right）；
?絕對定位元素（position:?absolute?|?fixed）壶栋；
?行內(nèi)塊元素（display:?inline-block）辰如；
?表格的單元格（display:?table-cells，TD贵试、TH）琉兜；
?表格的標(biāo)題（display:?table-captions，CAPTION）毙玻；
?'overflow'?特性不為visible?的元素（除非該值已經(jīng)傳播到viewport?）豌蟋；
BFC布局規(guī)則：
內(nèi)部的Box會在垂直方向，一個接一個地放置淆珊。
Box垂直方向的距離由margin決定夺饲。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化施符，否則相反)往声。即使存在浮動也是如此。
BFC的區(qū)域不會與float box重疊戳吝。
BFC就是頁面上的一個隔離的獨(dú)立容器浩销，容器里面的子元素不會影響到外面的元素。反之也如此听哭。
計算BFC的高度時慢洋，浮動元素也參與計算
BFC的主要作用及原理
1.自適應(yīng)兩欄式
2.清除浮動
總結(jié)
因為BFC內(nèi)部的元素和外部的元素絕對不會互相影響塘雳，因此， 當(dāng)BFC外部存在浮動時普筹，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局败明，BFC會通過變窄，而不與浮動有重疊太防。同樣的妻顶，當(dāng)BFC內(nèi)部有浮動時，為了不影響外部元素的布局蜒车，BFC計算高度時會包括浮動的高度讳嘱。避免margin重疊也是這樣的一個道理。
