一、何為BFC

首先BFC是一個名詞，是一個獨立的佈局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子裡面物品的擺放是不受外界的影響的。轉換為 BFC的理解則是：BFC中的元素的佈局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）並且在一個 BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。

二、BFC的形成條件

1、根元素； 2、浮動元素，float 除 none 以外的值； 3、定位元素，position（absolute，fixed）； 4、display 為以下其中之一的值 inline-block，table-cell，table-caption； 5、overflow 除了 visible 以外的值（hidden，auto，scroll）；

三、BFC的特點

1.內部的Box會在垂直方向上一個接一個的放置。 2.垂直方向上的距離由margin決定 3.bfc的區域不會與float的元素區域重疊。 4.計算bfc的高度時，浮動元素也參與計算 5.bfc就是頁面上的一個獨立容器，容器裡面的子元素不會影響外面元素。

四、合併外邊距與BFC

在CSS當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。 摺疊的結果： 1.兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。 2.兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。 3.兩個外邊距一正一負時，摺疊結果是兩者的相加的和。 觸發條件：

必須是處於常規文件流的塊級盒子，並且處於同一個BFC中。 沒有將他們分開的東西，如padding、border、clearance。 在垂直方向上是相鄰的，相鄰的情況有以下幾種 1、元素的margin-top與其第一個處於常規文件流中的子元素的margin-top 2、高度自動的元素的margin-bottom與其最後一個處於常規文件流中子元素的margin-bottom 3、元素的margin-bottom與其下一個處於常規文件流轉紅的兄弟元素的margin-top 4、元素的margin-top與其margin-bottom，但需滿足自身沒建立BFC、min-height為0、不包含正常文件流的子元素、高度為0或者auto。 解決方法： 要避免這個問題，可以讓觸發條件不成立，從而解決問題，所以有以下幾種解決方法 1、給父元素加高度或者設定padding值，將他們分開。 2：把父元素變成一個 block formating context ，也就是新建一個BFC，根據BFC的定義，下面是可選的方法 a、float: left/right b、position: absolute c、display: inline-block/table-cell d、overflow: hidden/auto

總結

BFC內部的元素和外部的元素絕對不會互相影響，因此， 當BFC外部存在浮動時，它不應該影響BFC內部Box的佈局，BFC會通過變窄，而不與浮動有重疊。同樣的，當BFC內部有浮動時，為了不影響外部元素的佈局，BFC計算高度時會包括浮動的高度。