前言
我们经常在不知不觉中使用到 BFC，例如，当元素的 float 不是 none，指定 float 为 left 或者 right 时，就可以创建 BFC。另外，绝对定位元素、display:inline-block、display:table-cell、display:flex、display:inline-flex 以及 overflow 指定除了 visible 的值等方式，也都可以创建 BFC。
BFC容器是什么
BFC（Block Formatting Context），即块格式化上下文，是 Web 页面的可视 渲染的一部分，也是块盒子的布局过程发生的区域。它是一个独立的渲染区域，规定了内部的 block-level box 如何布局，并且与这个区域外部毫不相干。
BFC布局规则
- 内部的 box 会在垂直方向，一个接一个的放置。
- box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠。
- 每一个元素的 margin box 的左边，与包含块 border box 的左边对齐（对于从左往右的格式化，否则相反）。
- BFC 的区域不会与 float box 重叠。
- BFC 是一个单独的容器，容器里面的子元素不会影响到外面的元素。
- 计算 BFC 的高度时，浮动元素也参与计算高度。
margin重叠
margin重叠指的是两个或多个盒子（块级元素）的margin会发生重叠，重叠后，margin值取最大值。 只发生在上下，左右不会重叠。
<style>
ul {}
li {
float: left;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li style="background-color: aqua;">1</li>
<li style="background-color: rgb(13, 33, 33);">2</li>
<li style="background-color: rgb(167, 16, 64);">3</li>
</ul>
</body>
在这份代码中，三个li设置了浮动布局，往左边排列
但是我们能够看到，由于设置了浮动布局，ul是没有高度的，li脱离了标准文档流，撑不起ul这个盒子。
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
height: 500px;
background-color: #600c0c;
margin-top: 100px;
}
.box {
height: 200px;
background-color: #311d1d;
/* 天生bug */
/* margin重叠 父容器子容器都有margin */
margin-top: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
接下来，我们看看这份代码
这份代码中，父容器和子容器都设置了margin-top，父容器margin-top为100px，子容器的margin-top为50px，按道理说子容器应该距离父容器的顶部距离50px，但是可以看见没有起作用，这是因为发生了margin重叠，这个重叠会取最大值，父容器100px更大，因此父容器起作用。
那么如何消除margin重叠呢？
<style>
* {
margin: 0;
padding: 0;
}
ul {
/* 这个属性会把一个容器变为BFC容器 */
overflow: hidden;
margin-top: 100px;
background-color: #2315e3;
}
li:nth-child(1) {
margin: 50px;
}
li:nth-child(2) {
margin: 50px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li style="height: 200px;height: 50px; background-color: #439773;">1</li>
<li style="height: 200px;height: 50px; background-color: #0d1813;">2</li>
</ul>
</div>
</body>
接下来我们看看这份代码，在父容器中，添加了一个overflow: hidden;这会把父容器变为一个BFC容器，这时候看，这些父容器和子容器的margin无论值的大小，都起作用了。
回到刚刚那个问题，如何消除margin重叠问题？
怎么解决？方案：BFC，创建块级格式化上下文，解决margin重叠问题。
BFC的布局规则
- 内部的Box会在垂直方向，一个接一个的放置。
- bfc容器内部和外部的容器相互隔离，互不影响。---解决margin重叠问题。
- bfc容器内，相邻元素的margin在垂直方向会重叠。
- bfc容器会把浮动容器设置高度。不会把所有脱离文档流的元素都设置高度比如绝对定位。
看到这里布局规则的第四条，我们就能想到，在浮动布局中，浮动元素都脱离了文档流，撑不起父容器的盒子，因此我们也可以通过BFC布局方式解决这个问题
可以看到，在给父容器设置浮动left之后，这个容器就有高度了。
触发BFC
- overflow: hidden || auto || scroll || overlay
- 浮动元素，float: left || right
- 绝对定位元素，position: absolute || fixed
- display: inline-block
- display: table-cell 元素，table-xxx 元素
- display: flex || inline-flex 弹性容器
小结
BFC（Block Formatting Context），就像是页面布局中的一个神奇领域。它有着独特的规则和作用，让我们的页面布局更加灵活和稳定。
通过浮动元素、绝对定位元素、特定的 display 属性以及溢出隐藏等方式，我们可以触发 BFC 的形成。
BFC 能够有效解决父元素高度塌陷、浮动元素覆盖、外边距折叠等问题，还能实现自适应两栏布局等效果。
理解和掌握 BFC 能让我们成为更优秀的网页设计师，为用户带来更美观、合理的页面体验。让我们在布局的世界里，不断探索和运用 BFC 的神奇力量吧！