BFC（Block Formatting Context）是指块级格式化上下文，它是 CSS 中的一个重要概念，用于控制块级盒子在布局时的行为。理解 BFC 对于处理布局、解决布局问题以及避免布局相关的 bug 非常重要。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

创建BFC的一些方法

CSS的BFC_控制块

高度坍塌

父级元素无法撑起浮动子元素的高度。

解决方法，父级元素添加属性overflow:auto,对父级元素创建一个BFC,创建BFC的元素计算高度时会把浮动元素的高度计算进去。

外边距折叠

只会发生在属于同一BFC的块级元素之间。

<div class="topbox" style="border: 1px solid salmon;">
	<div style="background-color: aliceblue;margin: 10px;">
			11111
	</div>
	<div style="background-color: antiquewhite;margin: 10px;">
		22222
	</div>
</div>

建一个BFC来防止此种情况的发生

<div class="topbox" style="border: 1px solid salmon;">
	<div style="overflow: hidden">
		<div style="background-color: aliceblue;margin: 10px;">
			11111
		</div>
	</div>
	<div style="background-color: antiquewhite;margin: 10px;">
		22222
	</div>
</div>