定義
在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分爲定位流、浮動流和普通流三種。而普通流其實就是指BFC中的FC。FC是formatting context的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何佈局，以及和其他元素之間的關係和作用。常見的FC有BFC、IFC，還有GFC和FFC。BFC是block formatting context，也就是塊級格式化上下文，是用於佈局塊級盒子的一塊渲染區域
觸發條件
滿足下列條件之一就可觸發BFC
【1】根元素，即HTML元素
【2】float的值不爲none
【3】overflow的值不爲visible
【4】display的值爲inline-block、table-cell、table-caption
【5】position的值爲absolute或fixed
作用
BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然。它與普通的塊框類似，但不同之處在於:
【1】可以阻止元素被浮動元素覆蓋
<說明>通過改變內容爲BFC背景爲紅色的盒子的屬性值，使其成爲BFC，以此阻止被綠色的浮動盒子覆蓋
【2】可以包含浮動元素
<說明>通過改變高度塌陷的黑色邊框的盒子的屬性值，使其成爲BFC，以此來包含綠色的浮動盒子
專門建立的學習Q-q-u-n： 731771211，分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
【3】屬於同一個BFC的兩個相鄰塊級子元素的上下margin會發生重疊，(設置writing-mode:tb-rl時，水平margin會發生重疊)。所以當兩個相鄰塊級子元素分屬於不同的BFC時可以阻止margin重疊
<說明>淡紅色背景的塊級盒子二的外面包一個div，通過改變此div的屬性使紅色盒子與綠色盒子分屬於兩個不同的BFC，以此來阻止margin重疊