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

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

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

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

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

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

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

BFC的特點(diǎn)：

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

BFC的作用：

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

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