BFC 是指”块级格式化上下文”（Block Formatting Context）的缩写，它是 CSS 中一种用于布局块级元素的渲染机制。
BFC 定义了一个独立的渲染区域，使得处于不同 BFC 中的元素可以相互隔离，互不影响。每个 BFC 内部的元素按照一定规则进行布局和渲染，这些规则包括以下特性：
内部的块级盒子会在垂直方向上一个接一个地放置。
每个盒子的左外边距（margin-left）与其容器的左边界相接触，即使存在浮动也是如此。
每个盒子的右外边距（margin-right）与其右边界的相邻盒子的左外边距相接触，除非相邻盒子是浮动的，否则会另起一行。
BFC 的区域不会与浮动元素的盒子重叠。
BFC 在页面上是一个独立的容器，内部的元素不会影响外部的布局。
BFC 具有一定的包裹性，内部的浮动元素也会被包裹在 BFC 内。
BFC 在前端开发中具有重要的应用和作用，例如：
清除浮动：当父元素触发 BFC 时，其会包含浮动元素，使得父元素的高度能够正确计算，避免出现高度塌陷问题。
创建自适应的多栏布局：通过触发 BFC，可以在一个容器中实现多栏布局，其中的列能够自适应内容的高度，并且不会相互影响。
阻止边距重叠：相邻两个元素的外边距在普通流中会发生重叠，但是当它们分别处于不同的 BFC 中时，可以阻止边距重叠的发生。
要触发 BFC，可以使用以下方式：
根元素（HTML）。
设置元素的 display 属性为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid 中的一种。
设置元素的 position 属性为 absolute 或 fixed。
设置元素的 overflow 属性为除 visible 以外的值（如 auto、scroll、hidden）。
使用 CSS3 的 float 属性。
BFC 是 CSS 布局的重要概念之一，它提供了更加可靠和灵活的布局机制，能够解决一些常见的
