JS每日一題: 如何理解CSS中BFC?

時間 2019-12-07

標籤每日如何理解 css bfc 欄目 JavaScript 简体版

原文原文鏈接

20190416期

如何理解CSS中BFC?css

定義: 塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其餘元素交互的區域。

BFC 特性及應用

同一個 BFC 下外邊距會發生摺疊

代碼理解佈局

<style>
div{
    width: 100px;
    height: 100px;
    background: red;
    margin: 100px;
}
</style>

//兩個 div 元素都處於同一個 BFC 容器下 (這裏指 body 元素) 因此第一個 div 的下邊距和第二個 div 的上邊距發生了重疊，兩個盒子之間距離只有 100px，而不是 200px
<body>
    <div></div>
    <div></div>
</body>

// 這不是 CSS 的 bug，咱們能夠理解爲一種規範，若是想要避免外邊距的重疊，能夠將其放在不一樣的 BFC 容器中

BFC 能夠包含浮動的元素(清除浮動）

咱們都知道，浮動的元素會脫離普通文檔流，來看下下面一個例子學習

// 因爲容器內元素浮動，脫離了文檔流，因此容器只剩下 2px 的邊距高度。若是使觸發容器的 BFC，那麼容器將會包裹着浮動元素
<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: red;float: left;"></div>
</div>

// 下面咱們將其清除浮動觸發BFC,將可包裹浮動元素

<div style="border: 1px solid #000;overflow:hidden">
    <div style="width: 100px;height: 100px;background: red;float: left;"></div>
</div>

BFC 能夠阻止元素被浮動元素覆蓋

這裏有一個經典的css佈局試題(兩列自適應佈局)就是應用的BFC特性flex

<div style="float:left; width:200px; background:blue">left</div>
  <div style="height:100%; background: red">right</div>

觸發BFC

下列方式會觸發BFC(摘抄自MDN)spa

根元素或包含根元素的元素
浮動元素（元素的 float 不是 none）
絕對定位元素（元素的 position 爲 absolute 或 fixed）
行內塊元素（元素的 display 爲 inline-block）
表格單元格（元素的 display爲 table-cell，HTML表格單元格默認爲該值）
表格標題（元素的 display 爲 table-caption，HTML表格標題默認爲該值）
匿名錶格單元格元素（元素的 display爲 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
overflow 值不爲 visible 的塊元素
display 值爲 flow-root 的元素
contain 值爲 layout、content或 strict 的元素
彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
網格元素（display爲 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不爲 auto，包括 column-count 爲 1）
column-span 爲 all 的元素始終會建立一個新的BFC，即便該元素沒有包裹在一個多列容器中