CSS BFC 總結
阿新 • • 發佈：2020-08-23
CSS BFC 總結
01 BFC 簡介
BFC(Block Formatting Context)塊格式化上下文
BFC 是一個獨立的區域，是塊盒子的佈局發生的的區域，也是浮動元素和其他元素互動的區域。
02 父元素觸發 BFC 的情況：
- 根元素
- 浮動元素(float 不是 none)
- 絕對定位元素(position 為 absolute 或 fixed)
- display 為以下屬性值的元素:
行內塊 inline-block,
表格單元格 table-cell,
表格標題 table-caption,
匿名錶格單元格 table, table-row, table-row-group, table-header-group, table-footer-group
flow-root
- overflow 值不為 visible 的元素
- 彈性元素 display: flex/inline-flex
- 網格元素 display: grid/inline-grid
塊格式化上下文包含建立它的元素內部的所有內容。
03 BFC 特性
- 子盒子會沿垂直方向順序排列；
- 子盒子左邊緣會和父盒子 content-box 的左邊緣重合；
- 子盒子垂直方向的距離由 margin 屬性決定，同一個 BFC 內的子盒子的 margin 會發生塌陷；
- BFC 是一個獨立的容器，容器的子元素不會響應外部的元素，同時也不會受到外部元素的影響；
- 計算 BFC 的高度的時候會將浮動子元素考慮在內;
- 浮動元素後的 BFC 兄弟元素寬度小於浮動元素所在行剩餘的寬度時，該 BFC 兄弟元素的左邊緣會和浮動元素所在行剩餘空間的左邊緣重合；
邊緣是指元素 （margin + border + padding + content 的區域的邊緣）
04 BFC 的應用
4.1 清除浮動
將父元素設定為 BFC 就可以清除子盒子的浮動。
最長間的方法就是設定父元素屬性 overflow 為 hidden。
不設定父元素為 BFC 時，浮動元素會脫離文件標準流，父元素高度將為0，
將父元素設定為 BFC 後，計算父元素的高度時會考慮浮動子元素。
4.2 解決外邊距塌陷
兩個 BFC 是兩個獨立的區域不會相互影響。
4.3 盒子寬度自適應
根據 BFC 特性：浮動元素和 BFC 兄弟元素之間的關係，可以給定浮動元素的寬度，不設定 BFC 兄弟元素的寬度，
或者設定為 auto（兩種方法等價都會自動填充剩餘的寬度），可以實現 BFC 兄弟元素的寬度自適應。
4.4 防止字型環繞
設定浮動元素後的下一個子元素為 BFC 即可。
例項
01 BFC 特性
<!--------------------------------------------------------------
BFC 特性例項
--------------------------------------------------------------->
<style>
.container01 {
width: 100%;
overflow: hidden; /* 觸發 BFC */
background-color: orange;
}
.container01 div {
padding-left: 20px;
height: 50px;
color: #fff;
font-size: 20px;
font-weight: 500;
line-height: 50px;
}
.container01 .item:nth-of-type(2n) {
margin: 10px 0;
width: 400px;
background-color: purple;
}
.container01 .item:nth-of-type(2n + 1) {
margin: 20px 0;
width: 200px;
background-color: blue;
}
.container01 .item:last-of-type {
float: left; /* 觸發 BFC（兩個 BFC 互不影響） */
background-color: red;
}
</style>
<h2 style="color: red; text-align: center;">-- BFC 特性 --</h2>
<div class="container01">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
02 BFC 特性例項：浮動元素和 BFC 兄弟元素
<!--------------------------------------------------------------
BFC 特性例項：浮動元素和 BFC 兄弟元素
--------------------------------------------------------------->
<style>
.container02 {
width: 100%;
overflow: hidden; /* 觸發 BFC */
background-color: orange;
}
.container02 div:nth-of-type(1) {
float: left; /* 觸發 BFC */
width: 50%;
height: 100px;
background-color: purple;
}
.container02 div:nth-of-type(2) {
overflow: hidden;
width: 40%;
height: 100px;
background-color: pink;
}
.container02 div:nth-of-type(3) {
overflow: hidden;
width: 60%;
height: 100px;
background-color: red;
}
.container02 div:nth-of-type(4) {
display: flex;
width: 30%;
height: 100px;
background-color: blue;
}
</style>
<h2 style="color: red; text-align: center;">-- BFC 特性例項：浮動元素和 BFC 兄弟元素 --</h2>
<div class="container02">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
03 BFC 清除浮動
<!--------------------------------------------------------------
BFC 清除浮動
--------------------------------------------------------------->
<style>
.container03 .float-container {
width: 100%;
overflow: hidden; /* 觸發 BFC */
background-color: orange;
}
.container03 .float-container .float-box {
float: left;
width: 400px;
height: 100px;
background-color: purple;
}
.container03 .no-float-box {
width: 600px;
height: 100px;
background-color: blue;
}
</style>
<h2 style="color: red; text-align: center;">-- BFC 清除浮動） --</h2>
<div class="container03">
<div class="float-container">
<div class="float-box"></div>
</div>
<div class="no-float-box"></div>
</div>
04 BFC 盒子寬度自適應：兩列布局
<!--------------------------------------------------------------
BFC 盒子寬度自適應：兩列布局
--------------------------------------------------------------->
<style>
.container04 {
width: 100%;
overflow: hidden; /* 觸發 BFC */
background-color: orange;
}
.container04 div:first-of-type {
float: left; /* 觸發 BFC */
width: 400px;
height: 100px;
background-color: purple;
}
.container04 div:last-of-type {
overflow: hidden; /* 觸發 BFC */
height: 100px;
background-color: blue;
}
</style>
<h2 style="color:red; text-align: center;">-- BFC 盒子寬度自適應：兩列布局 --</h2>
<div class="container04">
<div></div>
<div></div>
</div>
05 BFC 盒子寬度自適應：三列布局
<!--------------------------------------------------------------
BFC 盒子寬度自適應：三列布局
--------------------------------------------------------------->
<style>
.container05 {
width: 100%;
overflow: hidden; /* 觸發 BFC */
background-color: orange;
}
.container05 div:nth-of-type(1),
.container05 div:nth-of-type(2) {
width: 200px;
height: 100px;
background-color: purple;
}
.container05 div:nth-of-type(1) {
float: left;
}
.container05 div:nth-of-type(2) {
float: right;
}
.container05 div:last-of-type {
overflow: hidden; /* 觸發 BFC */
height: 100px;
background-color: blue;
}
</style>
<h2 style="color:red; text-align: center;">-- BFC 盒子寬度自適應：三列布局 --</h2>
<div class="container05">
<div></div>
<div></div>
<div></div>
</div>
參考：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://www.cnblogs.com/chen-cong/p/7862832.html
需要原始碼的朋友可以在下方留下你的郵箱，一般一週之內就會回覆。