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

1.Box: Box 是 CSS 布局的對象和基本單位，你可以理解為一個頁面就是由很多的 Box 組成的，這個 Box 就是我們所說的盒模型。

2.Formatting context：是W3C CSS2.1規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。

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

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

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

1.根元素：body；

2.元素設(shè)置浮動：float 除 none 以外的值；

3.元素設(shè)置絕對定位：position (absolute、fixed)；

4.display 值為：inline-block、table-cell、table-caption、flex 等；

5.overflow 值為：hidden、auto、scroll；

BFC 的特點：

1.垂直方向上，自上而下排列，和文檔流的排列方式一致。

2.在 BFC 中上下相鄰的兩個容器的 margin 會重疊

3.計算 BFC 的高度時，需要計算浮動元素的高度

4.BFC 區(qū)域不會與浮動的容器發(fā)生重疊

5.BFC 是獨立的容器，容器內(nèi)部元素不會影響外部元素

6.每個元素的左 margin 值和容器的左 border 相接觸

BFC 的作用：

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

解決高度塌陷的問題：在對子元素設(shè)置浮動后，父元素會發(fā)生高度塌陷，也就是父元素的高度變?yōu)?0。解決這個問題，只需要把父元素變成一個 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ā)生重疊，實現(xiàn)了自適應(yīng)兩欄布局。