先來看兩個相關的概念：

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

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

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

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

創建BFC的條件：

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

BFC的特點：

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

BFC的作用：

解決margin的重疊問題：由于BFC是一個獨立的區域，內部的元素和外部的元素互不影響，將兩個元素變為兩個BFC，就解決了margin重疊的問題。

解決高度塌陷的問題：在對子元素設置浮動后，父元素會發生高度塌陷，也就是父元素的高度變為0。解決這個問題，只需要把父元素變成一個BFC。常用的辦法是給父元素設置overflow:hidden。

創建自適應兩欄布局：可以用來創建自適應兩欄布局：左邊的寬度固定，右邊的寬度自適應。

左側設置float:left，右側設置overflow: hidden。這樣右邊就觸發了BFC，BFC的區域不會與浮動元素發生重疊，所以兩側就不會發生重疊，實現了自適應兩欄布局。