[1]定義 [2]觸發條件 [3]作用
×
目錄
[1]定義 [2]觸發 [3]作用定義
在解釋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、flex
【5】position的值為absolute或fixed
作用
BFC是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面元素，反之亦然。它與普通的塊框類似，但不同之處在於:
【1】可以阻止元素被浮動元素覆蓋
<說明>通過改變內容為BFC背景為紅色的盒子的屬性值，使其成為BFC，以此阻止被綠色的浮動盒子覆蓋
【2】可以包含浮動元素
<說明>通過改變高度塌陷的黑色邊框的盒子的屬性值，使其成為BFC，以此來包含綠色的浮動盒子
【3】屬於同一個BFC的兩個相鄰塊級子元素的上下margin會發生重疊，(設置writing-mode:tb-rl時，水平margin會發生重疊)。所以當兩個相鄰塊級子元素分屬於不同的BFC時可以阻止margin重疊
<說明>淡紅色背景的塊級盒子二的外麵包一個div，通過改變此div的屬性使紅色盒子與綠色盒子分屬於兩個不同的BFC，以此來阻止margin重疊
