是時候瞭解一下，你一直在使用，殊不知道概念的CSS BFC

時間 2019-11-30

標籤時候瞭解一下一直在使殊不知概念 css bfc 欄目 CSS 简体版

原文原文鏈接

概念

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

什麼鬼？幹什麼？我用過？

其實就是你的頁面，不信你看看bash

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 的元素
contain 值爲 layout、content或 paint 的元素
彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
網格元素（display爲 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不爲 auto，包括 column-count 爲 1）
column-span 爲 all 的元素始終會建立一個新的BFC，即便該元素沒有包裹在一個多列容器中

看第一條根HTML元素，那不就是咱們整個頁面就是一個BFC;ide

BFC包含建立它的元素內部的全部內容，可是不包括建立了新BFC的子元素的內部內容佈局

BFC佈局規則：

內部的盒會在垂直方向一個接一個排列（就是日常咱們塊級元素的排列）；
浮動盒區域不會與BFC重疊；
每一個元素的margin的左邊，與容器塊border 的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此；
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素；
處於同一個BFC中的元素相互影響，可能會發生margin(外邊距)重疊；
計算BFC的高度時，考慮BFC所包含的全部元素，連浮動元素也參與計算；

規則1 內部的盒會在垂直方向一個接一個排列

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
複製代碼

div {
    height: 50px;
}

.box1 {
    width: 400px;
    background-color: #82A6F5;
}

.box2 {
    width: 300px;
    background-color: #EAF048;
}

.box3 {
    width: 100px;
    background-color: #9FF048;
}

.box4 {
    width: 200px;
    height: 30px;
    background-color: #2A5200;
}
複製代碼

規則2 浮動盒區域不會與BFC重疊

藍色盒子設置浮動，黃色盒子會與之重合flex

<div class="col1"></div>
<div class="col2"></div>

複製代碼

div {
    height: 400px;
}

.col1 {
    width: 400px;
    background-color: #82A6F5;
    float: left;
}

.col2 {
	height: 500px;
    background-color: #EAF048;
}
複製代碼

建立BFCui

使用overflow：hidden建立BFCspa

.col2 {
    /**建立BFC**/
    overflow: hidden;
	height: 500px;
    background-color: #EAF048;
}

複製代碼

規則3 每一個元素的margin的左邊，與容器塊border 的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此

<div class="col1"></div>
<div class="col2"></div>

複製代碼

body{
    border: 10px solid #000000;
}

.col1 {
    width: 400px;
    background-color: #82A6F5;
    float: left;
}

.col2 {
	height: 500px;
    background-color: #EAF048;
}
複製代碼

規則5 處於同一個BFC中的元素相互影響，可能會發生margin重疊（以最大的margin爲準）；

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>
複製代碼

.col1 {
    width: 400px;
    height: 400px;
    background-color: #82A6F5;
    margin-bottom: 50px;
}

.col2 {
    height: 500px;
    width: 400px;
    background-color: #EAF048;
    margin-bottom: 60px;
}

複製代碼

規則6 計算BFC的高度時，考慮BFC所包含的全部元素，連浮動元素也參與計算

圖1

<div class="col">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

複製代碼

.col{
    border: 1px solid #2A5200;
    overflow: hidden;
}

.col1 {
    width: 400px;
    height: 400px;
    background-color: #82A6F5;
}

.col2 {
    height: 500px;
    width: 400px;
    background-color: #EAF048;
    float: left;
}

複製代碼

圖2

增長div.col overfloe:hidden;,建立了一個新的BFC高度增長3d

.col{
    border: 1px solid #2A5200;
    overflow: hidden;
}
複製代碼

咦？怎麼少了個規則4呢，其實仔細看看上面的例子都體現了佈局規則4 - BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素；code

BFC能解決什麼呢？

$\color{#ff534d}{1.自適應兩欄佈局（詳見規則2的列子）}$

$\color{#ff534d}{2.讓浮動內容和周圍的內容等高，清除浮動（詳見規則6的列子）}$

$\color{#ff534d}{3.分屬於不一樣的BFC時能夠阻止外邊距塌陷}$

由於BFC內部的元素和外部的元素絕對不會互相影響，所以，當BFC外部存在浮動時，它不該該影響BFC內部Box的佈局，BFC會經過變窄，而不與浮動有重疊。一樣的，當BFC內部有浮動時，爲了避免影響外部元素的佈局，BFC計算高度時會包括浮動的高度。避免外邊距塌陷也是這樣的一個道理。orm

結語

上面說的有些東西，其實在咱們日常的佈局中，已經有在使用這些規律，只是沒有總結出來，若是寫的很差之處歡迎批評指導。

若是你感受你學會，點個讚唄！！！

參考連接：

Block Formatting Context

相關標籤/搜索

每日一句

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

是時候瞭解一下 ，你一直在使用，殊不知道概念的CSS BFC

概念

什麼鬼？ 幹什麼？ 我用過？