1. 什么是BFC
BFC(Block Formatting Context——块格式化上下文)是Web页面的可视化CSS渲染的一部分。它是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。简单来说,BFC是一个独立的渲染区域,它遵循以下渲染规则。
2. BFC的渲染规则
1. BFC在Web页面上是一个独立的容器,容器内外互不影响2. 和标准文档流一样,BFC内的元素垂直方向的边距会发生重叠
3. BFC不会与浮动元素的盒子重叠
4. 计算BFC高度时即使子元素浮动也参与计算
3. 如何创建BFC
MDN web docs现在给出创建BFC的方法有以下几种(原文链接):
1. 根元素或包含根元素的元素2. 浮动元素(元素的 float 不是 none)
3. 绝对定位元素(元素的 position 为 absolute 或 fixed)
4. 行内块元素(元素的 display 为 inline-block)
5. 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
6. 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
7. 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
8. overflow 值不为 visible 的块元素
9. display 值为 flow-root 的元素
10. contain 值为 layout、content或 strict 的元素
11. 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
12. 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
13. 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
14. column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中
4. BFC的应用场景
1. 解决块级元素垂直方向的边距重叠问题<section id="father">
<style>
#father {
background-color: pink;
overflow: hidden;
}
#father .child {
background-color: red;
margin: 15px auto 20px;
}
</style>
<div class="child">这是第一个div</div>
<div class="child">这是第二个div</div>
</section>
由于块级元素垂直方向的边距会发生重叠,第一个div和第二个div之间的间距并不是15px加上20px后的35px,而是20px(较大的margin值),为了解决边距重叠的问题,让第两个div之间的间距变成35px,可以在div外面创建一个BFC,比如:
<div style="overflow:hidden">
<div class="child">这是第二个div</div>
</div>
因为BFC是一个独立的容器,容器内外互不影响,所以这里两个div之间的间距就变成了35px。
2. 清除浮动<section id="father">
<style>
#father {
background-color: pink;
}
#father .child {
font-size: 58px;
float: left;
}
</style>
<div class="child">这是一个浮动元素</div>
</section>
子元素浮动后,父元素失去了高度,为了清除浮动带来的这个影响可以将父元素设置成一个BFC:
#father {
background-color: pink;
overflow: auto;
}
因为BFC计算高度时,即使子元素是浮动元素也参与计算,所以这里的父元素高度就等于子元素高度而不是之前的0了。
3. 解决元素浮动后发生重叠的问题<section id="father">
<style>
#father {
background-color: red;
}
#father .left {
background-color: pink;
width: 100px;
height: 100px;
float: left;
}
#father .right {
background-color: #ccc;
height: 120px;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
![](https://i-blog.csdnimg.cn/blog_migrate/1bace6f20b2f12e81b3671572742125f.jpeg)
如图,左边的元素浮动之后,由于脱离标准文档流叠在了右边的元素上,为了让两个元素不重叠,我们把右边的元素设置成BFC:
#father .right {
background-color: #ccc;
height: 120px;
}
因为BFC不会与浮动元素的盒子重叠,所以这里右边的元素就不会叠在左边的浮动元素下面了。