定義：

　　塊級格式上下文（Block Formatting Context）是CSS中一個相對冷門的概念，今天被問到才引起注意，下文簡單介紹下它的用法，學習資料多來源於網路，實際開發中遇到再繼續更博吧。   　　BFC(Block formatting context)直譯為"塊級格式化上下文"。 　　它是一個獨立的渲染區域，只有Block-level box（塊級元素）參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干. 　　通俗地來說：建立了 BFC的元素就是一個獨立的盒子，裡面的子元素不會在佈局上影響外面的元素（裡面怎麼佈局都不會影響外部），BFC任然屬於文件中的普通流。

 

滿足BFC出現的情況：

• 浮動
• 絕對定位元素
• display為inline-block, table-cell, table-caption, flex, inline-flex
• 設定overflow且值不為visible
• display:flex 或者 display:inline-flex

　　補充：display:table-caption表示元素的display水平表現為表格標題，自動自適應於外部表格容器寬度

　　這麼一列舉，是不是感覺日常開發經常用到，只不過不知道官方叫法而已。

 

簡書找到一個例子描述的很清楚，貼上此處僅供學習，侵權刪。 作者：文風Yu
連結：https://www.jianshu.com/p/af03f45da81b

 

使用BFC防止外邊距塌陷

在同一個BFC中的兩個相鄰塊級元素的外邊距會發生塌陷，如下邊這個例子：

<div class="container">
  <p>Sibling 1</p> <p>Sibling 2</p> <div class="newBFC"> <p>Sibling 3</p> </div> </div> 

div.container是一個BFC，裡面有三個塊級元素，設定了相同的margin，其中第三個塊級元素外面套了一層div，但是未設定任何樣式。初始的CSS樣式如下：

.container {
  background-color: red;
  overflow: hidden;
}

p {
  margin: 10px 0; background-color: lightgreen; } 

初始結果如下：

  邊距塌陷

可以看到相鄰兩個p元素間的間距為10px而不是20px，可見發生了外邊距塌陷。如果要避免外邊距塌陷，只需要使第三個p元素的外部容器形成一個新的BFC：

.newBFC {
  overflow : hidden;  /* 形成新的 BFC */
}

修改後的效果為：防止邊距塌陷