塊格式化上下文(Block formatting contexts)

浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和overflow不爲visible的塊盒（當該值已被傳播到視口時除外（except when that value has been propagated to the viewport））會爲它們的內容創建一個新的塊格式化上下文

BFC佈局規則:

• BFC內部盒會在垂直方向,一個接一個的放置

• 盒的垂直方向的距離由margin決定.屬於同一個BFC的兩個相鄰盒子的margin會發生重疊

• 每一個元素的margin box的左邊,與包含塊border box的左邊相接觸(對於從左往右的格式化,不然相反).即便存在浮動也如此

• BFC的區域不會與float box重疊(利用這個特性能夠作自適應窗口大小)

• BFC就是頁面上的一個隔離的獨立容器,容器裏面的子元素不會影響到外面的元素.反之也是如此

• 計算BFC高度時,浮動元素也參與計算(清除浮動的原理)

塊格式化上下文由如下之一建立:

• 根元素或其它包含它的元素

• 浮動(元素的float不是none)

• 絕對定位的元素(元素具備position爲absolute或fixed)

• 行內塊 inline-blocks(元素具備display:inline-block)

• 表格單元格(元素具備display:table-cell,表格單元格默認屬性)

• 表格標題(元素具備display:table-caption,表格標題默認屬性)

• 塊元素 元素具備overflow值不是visible

• 彈性盒子flex boxes(元素具備display:flex或inline-flex)

• display:flow-root

一個塊格式化上下文包括建立它的元素內部全部內容,除了會建立新的塊格式化上下文的元素

BFC與margin

BFC能夠解決margin摺疊問題,須要注意的是,overflow:hidden等屬性只在父子元素下起做用,相鄰兄弟元素無效

BFC與float

BFC能夠改變float的覆蓋兄弟元素的問題,實現一側定寬的佈局,還能夠解決父元素塌陷問題

細說CSS中的BFC
學習格式化上下文