001. BFC · 每天一道面試題

BFC (Block formatting context) 就是塊級格式上下文，是頁面盒模型布局中的一種 CSS 渲染模式，相當于一個獨立的容器，里面的元素和外部的元素相互不影響。創建 BFC 的方式有： * 根元素(`<html>`) * 浮動元素（元素的[`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`或paint?的元素 * 彈性元素（[`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)）。 [傳送門](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context) BFC 主要的作用是： 1. 清除浮動 2. 防止同一 BFC 容器中的相鄰元素間的外邊距重疊問題 1. 內部box會在垂直方向，一個接一個地放置。 2. Box垂直方向的距離由margin決定，在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生折疊。 3. 在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣） 4. 形成了BFC的區域不會與float box重疊 5. 計算BFC高度時，浮動元素也參與計算 BFC作用： 1. 可實現左圖右文之類的效果： ~~~html <img src='image.png'> <p>我是超長的文字<p> ~~~ ~~~css img { float:left } p { overflow:hidden } ~~~ 2. 可以解決浮動元素造成的父元素高度塌陷問題： ~~~html <div class='parent'> <div class='float'>浮動元素</div> </div> ~~~ ~~~css .parent { overflow:hidden; } .float { float:left; } ~~~ ## 摘自 [ 第 39 題：介紹下 BFC 及其應用](https://muyiy.cn/question/css/39.html) [塊狀格式化上下文BFC](https://github.com/alianggu/blog/issues/6)