BFC即Block Formatting Context，中文为块级格式化上下文，它是CSS中的一个重要概念：
定义与原理
- BFC是Web页面中一个独立的渲染区域，它规定了内部的块级元素如何布局，并且与外部的元素相互隔离。在BFC中，元素按照一定的规则进行排列，这些规则决定了元素的位置、大小以及与其他元素之间的关系。
- 当一个元素满足以下条件之一时，就会创建一个BFC：
- 根元素（
<html>）。 - 浮动元素（
float属性不为none）。 - 绝对定位元素（
position属性为absolute或fixed）。 - 行内块元素（
display属性为inline-block）。 - 表格单元格（
display属性为table-cell）。 - 表格标题（
display属性为table-caption）。 - 匿名表格单元格元素（
display属性为table-cell的匿名元素，如在使用display: table时，内部未明确指定display属性的子元素）。 - 具有
overflow属性且值不为visible的元素。 - 弹性项目（
display属性为flex或inline-flex中的子元素）。 - 网格项目（
display属性为grid或inline-grid中的子元素）。
- 根元素（
布局规则
- 内部元素排列：在BFC中，块级元素会在垂直方向上一个接一个地排列，每个元素的上外边距与下一个元素的上外边距会发生合并，除非它们之间有边框、内边距或非空内容将它们隔开。
- 与浮动元素的关系：BFC中的元素不会与浮动元素重叠，而是会根据浮动元素的位置来调整自己的位置，从而实现自适应布局。
- 包含浮动元素：BFC可以包含浮动的子元素，使浮动元素不会超出其包含块的范围，避免了浮动元素对页面布局的影响。
作用与应用场景
解决外边距塌陷问题
- 外边距塌陷是指两个相邻的块级元素，当它们的上外边距和下外边距相遇时，会发生合并，导致外边距看起来比实际设置的要大。通过创建BFC，可以将两个元素分隔在不同的BFC中，从而避免外边距的塌陷。
```html
<!DOCTYPE html>
- 在上述示例中，`box1` 和 `box2` 是两个相邻的块级元素，它们的外边距发生了塌陷。通过将 `box2` 包裹在一个创建了BFC的元素中（这里使用 `overflow: hidden;` 创建BFC），可以使 `box1` 和 `box2` 的外边距不再塌陷，各自按照设置的外边距显示。
#### 实现两栏或多栏布局
- BFC可以用于实现两栏或多栏布局，其中一侧的元素可以浮动，另一侧的元素通过创建BFC来实现自适应布局，避免与浮动元素重叠。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC与两栏布局</title>
<style>
.left {
float: left;
width: 200px;
height: 300px;
background-color: lightblue;
}
.right {
height: 300px;
background-color: lightgreen;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
- 在这个两栏布局的示例中，左侧的元素通过
float: left;进行浮动，右侧的元素通过overflow: hidden;创建BFC，从而实现了右侧元素自适应宽度，并且不会与左侧的浮动元素重叠。
清除浮动
- 当一个元素包含浮动的子元素时，如果不进行处理，父元素的高度可能会塌陷，导致页面布局出现问题。通过在父元素上创建BFC，可以使父元素包含浮动的子元素，从而清除浮动，保持页面布局的正常。
```html
<!DOCTYPE html>
```
- 在上述示例中，父元素
parent通过overflow: hidden;创建BFC，从而包含了浮动的子元素child，防止了父元素高度塌陷，确保了页面布局的完整性。
BFC是CSS中一个非常重要的概念，它对于理解和掌握页面布局以及解决一些常见的布局问题都有着重要的作用，通过合理地创建和利用BFC，可以实现更加灵活和稳定的页面布局。
