最近面試較多嫉戚，但其實很多內(nèi)容自己也不太會，所以有了自問自答的環(huán)節(jié)。
a.什么是BFC
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）金吗，以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）趣竣。
一個HTML元素要創(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是一個獨立的布局環(huán)境，其中的元素布局是不受外界的影響虎忌，并且在一個BFC中泡徙，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列。
b.怎樣創(chuàng)建 BFC
要顯示的創(chuàng)建一個BFC是非常簡單的膜蠢，只要滿足上述4個CSS條件之一就行堪藐。例如：
<div class="container"> 你的內(nèi)容 </div>
在類container中添加類似 overflow: scroll，overflow: hidden挑围，display: flex礁竞，float: left，或 display: table 的規(guī)則來顯示創(chuàng)建BFC杉辙。雖然添加上述的任意一條都能創(chuàng)建BFC模捂，但會有一些副作用：
1、display: table 可能引發(fā)響應(yīng)性問題
2蜘矢、overflow: scroll 可能產(chǎn)生多余的滾動條
3狂男、float: left 將把元素移至左側(cè)，并被其他元素環(huán)繞
4品腹、overflow: hidden 將裁切溢出元素
因而無論什么時候需要創(chuàng)建BFC岖食，都要基于自身的需要來考慮。對于本文舞吭，將采用 overflow: hidden 方式：
.container {overflow: hidden;}
c.BFC可以做什么呢泡垃？
1.BFC可能造成外邊距折疊，也可以利用它來避免這種情況羡鸥。BFC產(chǎn)生外邊距折疊要滿足一個條件：兩個相鄰元素要處于同一個BFC中蔑穴。所以，若兩個相鄰元素在不同的BFC中兄春，就能避免外邊距折疊澎剥。
html:
<div class="container"> <p>Sibling 1</p> <p>Sibling 2</p> <div class="newBFC"> <p>Sibling 3</p> </div> </div>
css:
.container { background-color: red; overflow: hidden; /* creates a block formatting context */ } p { margin: 10px 0; background-color: lightgreen; } .newBFC { overflow: hidden; /* creates new block formatting context */ }
2.BFC包含浮動
浮動元素是會脫離文檔流的(絕對定位元素會脫離文檔流)。如果一個沒有高度或者height是auto的容器的子元素是浮動元素赶舆，則該容器的高度是不會被撐開的哑姚。我們通常會利用偽元素(:after或者:before)來解決這個問題。BFC能包含浮動芜茵，也能解決容器高度不會被撐開的問題叙量。
3.使用BFC避免文字環(huán)繞
<div class="container"> <div class="floated"> Floated div </div> <p> Quae hic ut ab perferendis sit quod architecto, dolor debitis quam rem provident aspernatur tempora expedita. </p> </div>因而，如果p元素創(chuàng)建一個新的BFC那它就不會再緊貼包含塊的左側(cè)了九串。
4.在多列布局中使用BFC
如果我們創(chuàng)建一個占滿整個容器寬度的多列布局绞佩，在某些瀏覽器中最后一列有時候會掉到下一行寺鸥。這可能是因為瀏覽器四舍五入了列寬從而所有列的總寬度會超出容器。但如果我們在多列布局中的最后一列里創(chuàng)建一個新的BFC品山，它將總是占據(jù)其他列先占位完畢后剩下的空間胆建。
html:
<div class="container"> <div class="column">column 1</div> <div class="column">column 2</div> <div class="column">column 3</div> </div>css:
.column { width: 31.33%; background-color: green; float: left; margin: 0 1%; } /* Establishing a new block formatting context in the last column */ .column:last-child { float: none; overflow: hidden; }現(xiàn)在盡管盒子的寬度稍有改變，但布局不會打破肘交。當(dāng)然笆载，對多列布局來說這不一定是個好辦法，但能避免最后一列下掉涯呻。這個問題上彈性盒或許是個更好的解決方案凉驻，但這個辦法可以用來說明元素在這些環(huán)境下的行為。
