[TOC] <br> <br> # BFC ## 概念 在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 塊格式化上下文包含創建它的元素內部的所有內容. 塊格式化上下文對浮動定位（參見[`float`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float "此頁面仍未被本地化, 期待您的翻譯!")）與清除浮動（參見[`clear`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear "clear?CSS 屬性指定一個元素是否可以在它之前的浮動元素旁邊，或者必須向下移動(清除浮動) 到這些浮動元素的下面。clear 屬性適用于浮動和非浮動元素。")）都很重要。浮動定位和清除浮動時只會應用于同一個BFC內的元素。浮動不會影響其它BFC中元素的布局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距折疊（[Margin collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)）也只會發生在屬于同一BFC的塊級元素之間。 ### Box: CSS布局的基本單位 Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。讓我們看看有哪些盒子： * block-level box:display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block fomatting context； * inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context； * run-in box: css3 中才有， 這兒先不講了。 <br> ### Formatting context Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。 CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。 <br> ### BFC 定義 BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。 <br> <br> ## 布局規則 * 內部的Box會在垂直方向，一個接一個地放置。 * Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊 * 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。 * BFC的區域不會與float box重疊。 * BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。 * 計算BFC的高度時，浮動元素也參與計算 <br> <br> ## 如何創建BFC * 根元素或包含根元素的元素 * 浮動元素（元素的[`float`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float "此頁面仍未被本地化, 期待您的翻譯!")不是?`none`） * 絕對定位元素（元素的?[`position`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position "CSS position屬性用于指定一個元素在文檔中的定位方式。top，right，bottom 和?left 屬性則決定了該元素的最終位置。")為?`absolute`?或?`fixed`） * 行內塊元素（元素的?[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "display CSS?屬性指定了元素的顯示類型，它包含兩類基礎特征，用于指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式布局的處理，內部顯示類型定義了元素內子元素的布局方式。")?為?`inline-block`） * 表格單元格（元素的?[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "display CSS?屬性指定了元素的顯示類型，它包含兩類基礎特征，用于指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式布局的處理，內部顯示類型定義了元素內子元素的布局方式。")為?`table-cell`，HTML表格單元格默認為該值） * 表格標題（元素的?[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "display CSS?屬性指定了元素的顯示類型，它包含兩類基礎特征，用于指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式布局的處理，內部顯示類型定義了元素內子元素的布局方式。")?為?`table-caption`，HTML表格標題默認為該值） * 匿名表格單元格元素（元素的?[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "display CSS?屬性指定了元素的顯示類型，它包含兩類基礎特征，用于指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式布局的處理，內部顯示類型定義了元素內子元素的布局方式。")為?`table、``table-row`、?`table-row-group、``table-header-group、``table-footer-group`（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或?`inline-table`） * [`overflow`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow "CSS屬性?overflow 定義當一個元素的內容太大而無法適應 塊級格式化上下文?時候該做什么。它是?overflow-x 和overflow-y的?簡寫屬性?")值不為?`visible`的塊元素 * [`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "display CSS?屬性指定了元素的顯示類型，它包含兩類基礎特征，用于指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式布局的處理，內部顯示類型定義了元素內子元素的布局方式。")值為`[flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root)`?的元素 * [`contain`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain "contain 屬性允許開發者聲明當前元素和它的內容盡可能的獨立于 DOM 樹的其他部分。這使得瀏覽器在重新計算布局、樣式、繪圖或它們的組合的時候，只會影響到有限的 DOM?區域，而不是整個頁面。")值為?`layout`、`content`或?`strict`?的元素 * 彈性元素（[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "display CSS?屬性指定了元素的顯示類型，它包含兩類基礎特征，用于指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式布局的處理，內部顯示類型定義了元素內子元素的布局方式。")為?`flex`?或?`inline-flex`元素的直接子元素） * 網格元素（[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display "display CSS?屬性指定了元素的顯示類型，它包含兩類基礎特征，用于指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式布局的處理，內部顯示類型定義了元素內子元素的布局方式。")為?`grid`?或?`inline-grid`?元素的直接子元素） * 多列容器（元素的?[`column-count`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-count "column-count?CSS屬性，描述元素的列數。")或?[`column-width`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-width "column-width?CSS屬性建議一個最佳列寬。?列寬是在添加另一列之前列將成為最大寬度。")不為?`auto，包括?``column-count`?為?`1`） * `column-span`?為?`all`?的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中（[標準變更](https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51)，[Chrome?bug](https://bugs.chromium.org/p/chromium/issues/detail?id=709362)）。 <br> <br> ## 應用 ### 阻止元素被浮動元素覆蓋 ~~~ <style> body { width: 300px; position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; } </style> <body> <div class="aside"></div> <div class="main"></div> </body> ~~~ 效果：  根據BFC布局規則第3條： > 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。 因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。 <br> <br> 據BFC布局規則第四條： > BFC的區域不會與float box重疊。 我們可以通過通過觸發main生成BFC， 來實現自適應兩欄布局。 ~~~ .main { overflow: hidden; } ~~~  <br> <br> ### 清除浮動 ~~~ <style> .par { border: 5px solid #fcc; width: 300px; } .child { border: 5px solid #f66; width:100px; height: 100px; float: left; } </style> <body> <div class="par"> <div class="child"></div> <div class="child"></div> </div> </body> ~~~ 效果：  <br> <br> 根據BFC布局規則第六條： > 計算BFC的高度時，浮動元素也參與計算 ~~~ .par { overflow: hidden; } ~~~ 效果：  <br> ### 解決margin折疊(傳遞) 子元素的margin-top傳遞到父級 ~~~ <style> p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p> <p>Hehe</p> </body> ~~~ 效果：  兩個p之間的距離為100px，發生了margin重疊。 <br> <br> 根據BFC布局規則第二條： > Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊 > **使用 `writing-mode:tb-rl;` 屬性會發生水平方向的重疊** 我們可以在p外面包裹一層容器，并觸發該容器生成一個BFC。那么兩個P便不屬于同一個BFC，就不會發生margin重疊了。 ~~~ <style> .wrap { overflow: hidden; } p { color: #f55; background: #fcc; width: 200px; line-height: 100px; text-align:center; margin: 100px; } </style> <body> <p>Haha</p> <div class="wrap"> <p>Hehe</p> </div> </body> ~~~ 效果：  參考資料 [前端精選文摘：BFC 神奇背后的原理](http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html)