先來看兩個相關(guān)的概念：

Box：Box 是 CSS 布局的對象和基本單位，?個??是由很多個 Box 組成的，這個Box就是我們所說的盒模型。

Formatting context：塊級上下?格式化，它是??中的?塊渲染區(qū)域，并且有?套渲染規(guī)則，它決定了其?元素將如何定位，以及和其他元素的關(guān)系和相互作?。

塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。

通俗來講：BFC是一個獨(dú)立的布局環(huán)境，可以理解為一個容器，在這個容器中按照一定規(guī)則進(jìn)行物品擺放，并且不會影響其它環(huán)境中的物品。如果一個元素符合觸發(fā)BFC的條件，則BFC中的元素布局不受外部影響。

創(chuàng)建BFC的條件：

根元素：body；元素設(shè)置浮動：float 除 none 以外的值；元素設(shè)置絕對定位：position (absolute、fixed)；display 值為：inline-block、table-cell、table-caption、flex等；overflow 值為：hidden、auto、scroll；

BFC的特點(diǎn)：

垂直方向上，自上而下排列，和文檔流的排列方式一致。在BFC中上下相鄰的兩個容器的margin會重疊計算BFC的高度時，需要計算浮動元素的高度BFC區(qū)域不會與浮動的容器發(fā)生重疊BFC是獨(dú)立的容器，容器內(nèi)部元素不會影響外部元素每個元素的左margin值和容器的左border相接觸

BFC的作用：

解決margin的重疊問題：由于BFC是一個獨(dú)立的區(qū)域，內(nèi)部的元素和外部的元素互不影響，將兩個元素變?yōu)閮蓚€BFC，就解決了margin重疊的問題。

解決高度塌陷的問題：在對子元素設(shè)置浮動后，父元素會發(fā)生高度塌陷，也就是父元素的高度變?yōu)?。解決這個問題，只需要把父元素變成一個BFC。常用的辦法是給父元素設(shè)置overflow:hidden。

創(chuàng)建自適應(yīng)兩欄布局：可以用來創(chuàng)建自適應(yīng)兩欄布局：左邊的寬度固定，右邊的寬度自適應(yīng)。

左側(cè)設(shè)置float:left，右側(cè)設(shè)置overflow: hidden。這樣右邊就觸發(fā)了BFC，BFC的區(qū)域不會與浮動元素發(fā)生重疊，所以兩側(cè)就不會發(fā)生重疊，實(shí)現(xiàn)了自適應(yīng)兩欄布局。