BFC：块级格式化上下文
BFC（Block Formatting Context），即“块级格式化上下文”，是CSS视觉渲染的一部分。它是一个独立的渲染区域，拥有自己的一套渲染规则，内部的元素布局不会影响到外部，反之亦然。理解BFC对于解决前端布局中的一些常见问题至关重要，尤其是在弹性布局（Flexbox）和网格布局（Grid）普及之前，它常用于处理浮动（float）元素带来的影响。
1. 什么是格式化上下文？
在CSS中，每个元素都属于一个格式化上下文。最常见的两种是：
- 块级格式化上下文（BFC）： 针对块级盒子的布局。在BFC中，块级盒子从上到下垂直排列。
- 行内格式化上下文（IFC）： 针对行内盒子的布局。在IFC中，行内盒子从左到右水平排列。
BFC可以被看作是一个完全独立的容器，它内部的元素布局不会影响到外部的元素，外部的元素也不会影响到BFC内部的布局。这种“隔离”特性是BFC解决布局问题的关键。
2. 如何创建BFC？
一个元素要成为BFC，需要满足以下条件之一：
- 根元素（
<html>）： 整个HTML文档的根元素<html>本身就是一个BFC。 float属性不为none： 浮动元素（float: left;或float: right;）会创建BFC。position属性不为static或relative： 绝对定位元素（position: absolute;或position: fixed;）会创建BFC。display属性为inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid： 这些属性值会创建BFC。overflow属性不为visible： 例如overflow: hidden;、overflow: auto;、overflow: scroll;。这是最常用且副作用最小的创建BFC的方式，尤其用于清除浮动。
3. BFC的特性与应用场景
BFC的特性决定了它在解决特定布局问题时的强大能力。
特性一：BFC内部的元素不会与外部元素重叠
BFC是一个独立的渲染区域，它内部的元素布局不会影响到外部的元素，外部的元素也不会影响到BFC内部的布局。这使得BFC可以用于隔离浮动元素，防止其影响到BFC外部的布局。
特性二：BFC可以包含浮动元素
当一个容器内部有浮动元素时，如果容器没有设置高度，它通常会发生高度塌陷，即容器的高度无法包裹浮动元素。这是因为浮动元素脱离了正常的文档流。然而，如果这个容器自身创建了一个BFC，那么它在计算自身高度时会把浮动子元素的高度也计算在内，从而“闭合”浮动。
应用场景：清除浮动
这是BFC最常见的应用之一。通过给浮动元素的父容器添加overflow: hidden;（或其他能创建BFC的属性），可以使父容器包含浮动子元素，解决高度塌陷问题。
示例（浮动导致父元素高度塌陷）：
<style>
.container {
background-color: green;
width: 500px;
/* height: 100px; */ /* 如果不设置高度，会被浮动子元素影响 */
}
.box {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
<div class="container">
<div class="box"></div>
<!-- 此时container的高度会塌陷，因为box浮动了 -->
</div>
示例（通过BFC清除浮动）：
<style>
.container {
background-color: green;
width: 500px;
overflow: hidden; /* 触发BFC，包含浮动子元素 */
}
.box {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
<div class="container">
<div class="box"></div>
<!-- 此时container的高度会正常包裹box -->
</div>
特性三：BFC可以阻止外边距折叠（Margin Collapsing）
在正常文档流中，相邻的块级元素的垂直外边距有时会发生折叠，即取两者中较大的那个值作为最终的外边距。然而，如果两个相邻的块级元素分别处于不同的BFC中，它们的外边距就不会发生折叠。
应用场景：防止外边距折叠
当需要确保两个相邻元素的垂直外边距不折叠时，可以将其中一个或两个元素包裹在一个新的BFC中。
示例（外边距折叠）：
<style>
.box1 {
width: 100px;
height: 50px;
background-color: blue;
margin-bottom: 20px;
}
.box2 {
width: 100px;
height: 50px;
background-color: orange;
margin-top: 30px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<!-- box1和box2之间的垂直间距将是30px，而不是20px+30px=50px -->
示例（通过BFC阻止外边距折叠）：
<style>
.box1 {
width: 100px;
height: 50px;
background-color: blue;
margin-bottom: 20px;
}
.wrapper {
overflow: hidden; /* 创建BFC */
}
.box2 {
width: 100px;
height: 50px;
background-color: orange;
margin-top: 30px;
}
</style>
<div class="box1"></div>
<div class="wrapper">
<div class="box2"></div>
</div>
<!-- box1和box2之间的垂直间距将是20px+30px=50px -->
特性四：BFC可以实现两列或多列布局
在弹性布局和网格布局出现之前，BFC常用于实现自适应的两列或多列布局。例如，一列浮动，另一列创建BFC。
应用场景：自适应两列布局
<style>
.left {
width: 200px;
height: 150px;
background-color: lightblue;
float: left;
}
.right {
height: 200px;
background-color: lightcoral;
overflow: hidden; /* 创建BFC */
}
</style>
<div class="left">左侧固定宽度</div>
<div class="right">右侧自适应宽度</div>
在这个例子中，左侧元素浮动，右侧元素通过overflow: hidden;创建BFC。由于BFC不会与浮动元素重叠，因此右侧元素会自动占据剩余空间，实现了自适应布局。
总结
BFC（块级格式化上下文）是CSS布局中一个重要的概念。它定义了一个独立的渲染区域，内部的元素布局规则与外部隔离。通过理解BFC的创建条件（如overflow不为visible、浮动、绝对定位等）及其特性（包含浮动元素、阻止外边距折叠、隔离内部与外部布局），我们可以有效地解决前端开发中的常见布局问题，如清除浮动、防止外边距折叠以及实现多列布局。虽然现代CSS布局方式（如Flexbox和Grid）提供了更强大和灵活的布局能力，但BFC作为CSS渲染机制的底层概念，仍然是理解和调试复杂布局的基础。
