BFC概念
BFC（Block Formatting Context）即塊級(jí)格式化上下文，是Web頁面的可視CSS渲染的一部分。它是一個(gè)獨(dú)立的渲染區(qū)域，讓其中的元素在布局上與外部的元素互不影響。簡單來說，BFC提供了一個(gè)環(huán)境，允許內(nèi)部的塊級(jí)元素在垂直方向上一個(gè)接一個(gè)地放置，同時(shí)，BFC也會(huì)影響外部的布局特性，比如防止外邊距折疊。
創(chuàng)建BFC方式
- 根html元素。
- 浮動(dòng)元素（元素的float不是none）。
- 絕對(duì)定位元素（元素的position為absolute或fixed）。
- 行內(nèi)塊元素（元素的display為inline-block）。
- 表格的表單元素（元素的display為table、table-cell、table-caption）。
- overflow的值不為visible的塊元素。
- 彈性盒（display為flex或inline-flex元素的直接子元素）。
- 網(wǎng)格布局（display為grid或inline-grid元素的直接子元素）。
BFC作用
- 防止外邊距折疊（Margin Collapse）：在BFC中，相鄰塊級(jí)盒子的上下外邊距會(huì)發(fā)生重疊，而BFC可以避免外邊距折疊。
- 清除浮動(dòng)（Clearing Floats）：BFC可以包含浮動(dòng)元素，防止父容器高度塌陷。
- 隔離元素：在BFC中，元素的布局不會(huì)影響外部元素的布局。
BFC使用示例
- 防止外邊距折疊示例
HTML：
<div class="container">
<div class="box ac">A</div>
</div>
<div class="box bc">B</div>
CSS：
.box {
width: 100px;
height: 100px;
color: white;
}
.ac {
background: red;
margin-bottom: 20px;
}
.bc {
background: blue;
margin-top: 20px;
}
.container {
overflow: hidden;
}
防止從屬于同一個(gè)BFC的相鄰塊級(jí)盒模型外邊距與外部塊級(jí)盒模型外邊距的折疊。
- 包含浮動(dòng)元素
HTML：
<div class="parent">
<div class="float-child">浮動(dòng)元素</div>
</div>
CSS:
.parent {
border: 2px solid #000;
overflow: hidden; /* 觸發(fā)BFC */
}
.float-child {
float: left;
width: 100px;
height: 100px;
background-color: #ff0000;
}
給.parent設(shè)置overflow: hidden;觸發(fā)BFC，確保父容器能夠包含其內(nèi)的浮動(dòng)元素。這解決了常見的浮動(dòng)導(dǎo)致的父容器高度塌陷問題。
如果不設(shè)置.parent為overflow: hidden;則會(huì)出現(xiàn)高度塌陷文章來源：http://www.zghlxwxcb.cn/news/detail-828368.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-828368.html
到了這里，關(guān)于CSS之BFC的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
