1. BFC特性

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

個人理解：在一個BFC區域裏，不管內部元素怎麼倒騰，始終不影響該區域外部元素。

2. 如何創建BFC

參閲MDN文檔説明： 區塊格式化上下文

3. 為何創建BFC

格式化上下文影響佈局，通常，我們會為定位和清除浮動創建新的 BFC，而不是更改佈局，因為創建新BFC可以做到以下幾點：

• 包含內部浮動。
• 排除外部浮動。

• 阻止外邊距重疊。

  2.1 包含內部浮動

  特性H BFC 使得讓浮動內容和周圍的內容等高。

  父級設為BFC，最終效果是父級高度跟隨內部浮動or其他內容等高，即父級自適應高度

  個人理解：

  1. 假如在一個div容器W裏有兩個塊元素A、B，設A為float:left，B默認佈局。此時如果A的高度超過了W，就可以看到A的渲染區域超出了W的渲染區域，這時候佈局就難了，因為A影響到了div容器外部元素的佈局。
  2. 根據上述特性H，只要將W創建為BFC，則A和它周圍的內容(此處為B)等高，也就是説不管是A更高還是B更高，它們都會以最高的那個為準一樣高。
  3. 根據這個特性，可以做左上角圖片，右下文字包圍的效果。

  2.2 排除外部浮動

  特性F 正常文檔流中建立的 BFC 不得與元素本身所在的塊格式化上下文中的任何浮動的外邊距重疊。

  個人理解：

  1. 假如在一個div容器W裏有兩個塊元素A、B，設A為float:left，B默認佈局。此時A因為脱離了文檔流，所以它是覆蓋在B上面的，B佔100%寬度。如果我們不想B被覆蓋呢？
  2. 根據上述特性F，只要將B創建為BFC，則B不可以與A的外邊距重疊，如此一來B就會佔據除A佔據寬度之外的其他空間了。
  3. 根據這個特性，可以做兩列布局，左側固定寬度，右側寬度自適應的效果。

  2.3 防止外邊距重疊

  特性M 創建新的BFC可以避免兩個相鄰的元素外邊距重疊

  個人理解：

  1. 假如在一個div容器W裏有兩個塊元素A、B，A、B分別設置了margin: 10px 0，此時希望看到的是A、B垂直相間10 + 10 = 20px，但是實際上A、B之間是10px的間隔。這就是我們常説的margin坍塌，外邊距重疊。
  2. 根據上述特性M，只要將A或者B其中之一包裹在一個div容器I裏，然後將I創建為BFC，如此一來，A、B垂直相間將為20px

  3. 根據這個特性，可以解決margin坍塌/外邊距重疊問題

     ##### 2.3.1 為什麼加了BFC外邊距就不重疊？

     個人理解：

     1. 首先還是因為BFC區域內部元素不會影響外部元素的定位、佈局。
     2. 在創建BFC之前，AB的margin是相互以對方為定位標準的，創建了BFC區域之後，AB的margin值都以BFC區域的邊為標準了。

4. 多列布局實現方案

方案1：2.2所述，使用特性F

方案2：使用flex佈局，左側定寬，右側自適應

5. 推薦閲讀

• MDN CSS：層疊樣式表
• MDN CSS：區塊格式化上下文