什么是BFC？CSS中的BFC有什么用？
BFC是块级格式化上下文（Block Formatting Context）的缩写。可以把它理解为一个独立的渲染区域，在这个区域内部，元素按照一定的规则进行布局，并且与外界隔离开来。这个区域的内部布局，不会影响到外部区域；同样，外部区域的布局，也不会影响到内部区域。BFC就像一个自带结界的小世界。
触发BFC的条件
并不是所有元素都会产生BFC。当一个元素满足以下任何一个条件时，就会为它的内容创建一个新的BFC：
- 根元素（<html>）
- 浮动元素（元素的
float值不是none） - 绝对定位元素（元素的
position值为absolute或fixed） - 行内块元素（元素的
display值为inline-block） - 表格单元格（元素的
display值为table-cell，HTML表格单元格默认为该值） - 表格标题（元素的
display值为table-caption，HTML表格标题默认为该值） overflow计算值不为visible的块元素（例如overflow: hidden、overflow: auto、overflow: scroll）- 弹性元素（
display: flex或inline-flex元素的直接子元素） - 网格元素（
display: grid或inline-grid元素的直接子元素） contain值为layout、content或strict的元素
在实际开发中，最常用的触发BFC的方式是设置 overflow: hidden 或者 display: flex。
BFC的布局规则
一个BFC内部遵循以下布局规则，理解这些规则是掌握BFC用途的关键：
- 内部的块级元素会在垂直方向，一个接一个地放置。
- 块级元素的垂直方向距离由
margin决定。属于同一个BFC的两个相邻块级元素的margin会发生折叠（外边距合并）。 - 每个元素的左外边距与包含块的左边框相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此。
- BFC的区域不会与浮动的元素重叠。
- 计算BFC的高度时，浮动元素也参与计算。
BFC的主要用途
基于上述规则，BFC在CSS布局中主要解决以下三个常见问题：
1. 清除浮动带来的高度塌陷
当一个父元素内部的所有子元素都设置了浮动，父元素就会失去高度，表现为高度为0，这就是高度塌陷。这是因为浮动元素脱离了普通文档流，父元素在计算高度时不会将其计算在内。通过在父元素上触发BFC，可以让父元素在计算高度时，强制将内部的浮动元素也计算在内，从而重新包裹住它们。
/* 没有触发BFC的父容器，会高度塌陷 */
.parent-without-bfc {
border: 2px solid red;
background-color: #f0f0f0;
}
.child-float {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
/* 为父容器触发BFC，解决高度塌陷 */
.parent-with-bfc {
border: 2px solid blue;
background-color: #f0f0f0;
/* 通过设置 overflow: hidden 触发BFC */
overflow: hidden;
}<!-- 未使用BFC的父容器 -->
<div class="parent-without-bfc">
<div class="child-float"></div>
<div class="child-float"></div>
</div>
<p>上方的父容器因为没有触发BFC，会失去高度，表现为一根红线。</p>
<!-- 使用BFC的父容器 -->
<div class="parent-with-bfc">
<div class="child-float"></div>
<div class="child-float"></div>
</div>
<p>上方的父容器因为触发了BFC，会正确计算内部浮动元素的高度，显示为蓝色边框包裹。</p>2. 防止外边距折叠
属于同一个BFC的两个相邻元素，它们的上下外边距会发生合并，取其中较大的值。这在排列列表或段落时有时会带来不可预期的间距。通过将其中一个元素包裹在一个新的BFC中，就可以阻止它与外部元素的外边距合并。
/* 父子元素同属于一个BFC，边距会折叠 */
.box {
margin-top: 50px;
background-color: coral;
width: 200px;
height: 100px;
}
.container-without-bfc {
background-color: lightyellow;
}
/* 内部元素 margin-top 会与父容器 margin-top 合并 */
.container-without-bfc .box {
margin-top: 50px;
}
/* 通过给父容器触发BFC，隔离内部元素的边距 */
.container-with-bfc {
background-color: lightyellow;
overflow: hidden; /* 触发BFC */
}
.container-with-bfc .box {
margin-top: 50px; /* 这个外边距不会溢出到父容器外部 */
}<h4>外边距折叠示例（未使用BFC）</h4>
<div class="container-without-bfc">
<div class="box"></div>
</div>
<div class="container-without-bfc">
<div class="box"></div>
</div>
<p>两个黄色容器之间的间距可能会比预期的50px小，因为内部的box的margin-top与外部容器margin发生了折叠。</p>
<h4>外边距折叠示例（使用BFC解决）</h4>
<div class="container-with-bfc">
<div class="box"></div>
</div>
<div class="container-with-bfc">
<div class="box"></div>
</div>
<p>两个黄色容器之间的间距现在是正确的50px，因为BFC隔离了内部元素的外边距。</p>3. 实现自适应两栏或多栏布局
BFC的一个重要特性是，它不会与浮动元素重叠。利用这一点，可以轻松实现一个固定宽度侧边栏和自适应内容区域的经典布局。让侧边栏浮动，主要内容区域触发BFC，这样主要内容区域就会自动占据剩余的所有空间，而不会与侧边栏重叠。
* {
box-sizing: border-box;
}
.layout-container {
width: 600px;
border: 1px solid #ccc;
overflow: hidden; /* 为父容器触发BFC，清除浮动影响 */
}
.layout-sidebar {
float: left;
width: 150px;
height: 200px;
background-color: #e0f7fa;
}
.layout-main {
/* 触发BFC，不与浮动元素重叠 */
overflow: auto;
/* 或者 display: flow-root; */
height: 200px;
background-color: #ffe0b2;
}<div class="layout-container">
<div class="layout-sidebar">固定宽度侧边栏 (150px)</div>
<div class="layout-main">自适应内容区域。因为触发了BFC，它会自动填满父容器减去侧边栏后的剩余宽度，不会被浮动元素覆盖。</div>
</div>总结
BFC是CSS布局中的一个核心概念。它本质上是一个独立的渲染环境，通过触发BFC，开发者可以优雅地解决高度塌陷、外边距折叠和元素重叠等常见布局问题。理解并灵活运用BFC，是编写健壮、可控CSS代码的关键技能。除了上述提到的 overflow 和 display 属性，现代CSS中 display: flow-root 元素也是一个专门用于创建无副作用的BFC的优秀选择，它不会像 overflow: hidden 那样修剪内容，也不会像浮动那样改变元素自身的特性。