經過例子講解BFC

時間 2020-01-20

標籤經過例子講解 bfc 简体版

原文原文鏈接

BFC的基本概念

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

如何建立BFC

下列方式會建立 塊格式化上下文：

根元素(<html>)
浮動元素（元素的 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 的元素， 能夠建立無反作用的BFC（火狐53+，chrome58+，opera45+支持）
contain 值爲 layout、content或 paint 的元素
彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
網格元素（display爲 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不爲 auto，包括 `column-count 爲 1`）
column-span 爲 all 的元素始終會建立一個新的BFC，即便該元素沒有包裹在一個多列容器中（標準變動，Chrome bug）。

BFC的使用場景（經過例子講解）

清除浮動css

csshtml

.box {
    border: 1px solid #f00;
    // 觸發BFC, 如下任意一種
    overflow: hidden;
    /* overflow: auto; */
    /* position: absolute; */
    /* position: fixed; */
    /* display: table; */
    /* display: flex; */
}

.fl {
    float: left;
    width: 50px;
    height: 50px;
    background: #0f0;
    margin: 5px;
}

htmlgit

<div class="box">
    <div class="fl"></div>
    <div class="fl"></div>
    <div class="fl"></div>
</div>

效果展現

解決外邊距塌陷github

建立新的BFC避免兩個相鄰 <div> 之間的外邊距合併問題

下面代碼：chrome

三個p標籤，距離上方15px, 下方20px
```
p {
  margin: 15px auto 20px;
  background: #f00;
}
```
htmlide
```
<div class="bfc-container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
```
效果展現

)佈局

兩個p標籤之間的高度爲20px, 並非 20+15 = 45 px, 這就是邊距重疊，選擇最大的一個邊距，及20px

解決方法就是給p標籤一個父元素，並建立BFCflex

cssui
```
p {
    margin: 15px auto 20px;
    background: #f00;
}
```
htmlspa
```
<p>1</p>
<div style="overflow: hidden;">
    <p>2</p>
</div>
<p>3</p>
```
這時候，中間的元素邊距不會發生重疊，此時的間距就是 45px

你們能夠去嘗試一下

參考文檔：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。