BFC 是什么？
BFC代表"块级格式化上下文"（Block Formatting Context）。它是CSS中的一个概念，用于描述块级元素如何布局、定位以及与其他元素互动。 BFC是一个独立的渲染区域，它具有一组规则，决定了内部块级元素如何布局和相互影响。每个BFC都是独立的，内部元素的布局不会影响到外部元素。
块级格式化上下文，和块级标签不是一个东西。 BFC相当于一个完全独立的空间，让空间里面的元素不影响到外边的元素。
创建BFC的条件
- 浮动元素(float属性不为none)。
- 绝对定位元素(position: absolute/fixed)。
- display属性值为inline-block、table-cell、table-caption、flex、或grid的元素。
- overflow属性值不为visible的元素（例如，overflow: auto或overflow: hidden）。
BFC具有的特性和行为
- 内部的块级元素在垂直方向上一个接一个地排列。
- 块级元素在BFC内部不会与浮动元素重叠。
- BFC区域的边缘会包含其所有子元素的边距。
- BFC可以阻止margin重叠现象。
- BFC在某些情况下可以包含浮动元素，避免父元素塌陷。
应用场景
- 清除浮动（使用overflow: auto或overflow: hidden来创建新的BFC，避免父元素高度塌陷）。
- 防止边距重叠。
- 创建多栏布局（使用float、flex或grid等属性创建多列）。
- 控制文本环绕元素。
