深刻理解BFC

定義

　　在解釋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，以此來包含綠色的浮動盒子

　　【3】屬於同一個BFC的兩個相鄰塊級子元素的上下margin會發生重疊，(設置writing-mode:tb-rl時，水平margin會發生重疊)。因此當兩個相鄰塊級子元素分屬於不一樣的BFC時能夠阻止margin重疊

　　<說明>淡紅色背景的塊級盒子二的外面包一個div，經過改變此div的屬性使紅色盒子與綠色盒子分屬於兩個不一樣的BFC，以此來阻止margin重疊