BFC是什麼？有什麼用？

什麼是BFC（Block Formatting Context ）

定義：

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的内容建立新的BFC（塊級格式上下文）。

可以了解為BFC是一個塊獨立的作用域，它有些自己的特性

那如何産生BFC？

通過以下幾種方法就能生成一個BCF

1. float

   的值不是

   none

2. position

   的值不是

   static

   或者

   relative

   。

3. display

   的值是

   inline-block

   、

   table-cell

   、

   flex

   、

   table-caption

   或者

   inline-flex

4. overflow

   的值不是

   visible

BFC有哪些特點

• 根元素會預設建立一個BFC
• 在同一個BCF中，每一個元素左外邊與包含塊（父塊）的左邊相接觸（對于從右到左的格式化，右外邊接觸右邊）， 即使存在浮動也是如此（盡管一個元素的内容區域會由于浮動而壓縮–包裹性），除非這個元素也建立了一個新的 BFC。

  

  

  

  就像上面的例子，container是一個BFC，裡面的元素按照

  ‘元素左外邊與包含塊（父塊）的左邊相接觸’

  ，就算是浮動元素也是這樣，是以兩者會發生重疊

• 建立了BFC的元素不能與浮動元素重疊。

  還是上面那個例子，如果把d2建立為BFC，那麼兩者将不會發生重疊

  

  

• 當容器有足夠的剩餘空間容納 BFC 的寬度時，所有浏覽器都會将 BFC 放置在浮動元素所在行的剩餘空間内。

  還是上面那個例子，d2之是以會放在d1後面，就是因為這條規則，假如container寬度隻有60px，那麼剩餘10px的空間放不下d2（50px），就會将d2放到下一行（少數浏覽器可能實作不同）

• css規定，在計算生成了 BFC 的元素的高度時，其浮動子元素應該參與計算。

  是以說BFC包含浮動元素不會發生高度坍塌，可以利用BFC這個特性來清除浮動。

• 兩個相鄰的普通流中的塊在垂直位置的空白邊會發生折疊現象。

  也就是處于同一個BFC中的兩個垂直視窗的margin會重疊，解決這種現象可以分别給兩個塊包裹一層BFC，這樣就不會折疊了。因為BFC還有一個特性就是：生成 BFC 的元素不會和在流中的子元素發生空白邊折疊。

  

  

  

  上面這種情況

  margin

  會發生折疊，本來應該是2em，折完隻剩1em（是以說margin也可以了解為

  ‘最小的間距’

  ）。然後為了解決這種情況，我們分别給b1，b2包裹一個BFC

  

  

  

  這樣就能解決折疊問題了。不能直接讓b1，b2變成BFC，這樣是無法解決折疊的，因為b1，b2這時是處于同一個BFC中！（你可以僅把

  .BFC

  裡面的

  overflow

  注釋掉，看看會發生什麼，然後結合這個現象去了解接下來這一條特性）
• BCF就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會在布局上影響到外面的元素，反之也是如此。