BFC
块级格式化上下文（Block Formatting Context）的缩写，是一种 Web 页面中的 CSS 渲染模式，它是一个独立的渲染区域，具有自己的渲染规则和独立的布局机制，不受外部影响。
一个元素要想成为 BFC，需要满足以下条件之一：
- 根元素（HTML）。
- float 属性不为 none。元素会脱离文档流，形成一个新的块级上下文。
- position 属性为 absolute 或 fixed。可以脱离文档流，不再与其他元素共同占据同一个布局空间，从而形成一个新的块级上下文
- display 属性为 inline-block、table-cell、table-caption、flex、inline-flex 中的任意一个。元素也会形成一个新的块级上下文，这是因为这些属性可以让元素具有类似于块级元素的特性，比如可以设置宽度、高度、内边距和外边距等，并且可以在文本流中独立进行布局。
- overflow 属性不为 visible。
overflow属性可以控制元素内容溢出时的处理方式，如果设置为除了visible以外的其他值，就可以让元素形成一个新的块级上下文。 - contain
属性为layout、content、strict`。 column-count或column-width属性不为auto。writing-mode属性为tb-rl（从上到下、从右到左排列）。display: flow-root，这是一个比较新的属性，可以用来快速创建 BFC。
BFC 的主要作用是解决元素间的布局问题，它可以避免一些常见的布局问题，如浮动元素引起的父元素高度塌陷、外边距重叠等。
特点：
- 内部的 Box 会在垂直方向一个接一个地放置。
- Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
- 每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反），即使存在浮动也是如此。
- BFC 的区域不会与 float box 重叠。BFC 可以阻止元素被浮动元素覆盖
- BFC 在页面上是一个独立的容器，容器里的子元素不会影响到外面的元素，反过来也是一样的。所以会有父元素坍塌的问题，通过清除浮动可以解决。
- 计算 BFC 的高度时，浮动元素也参与计算。
总之，BFC 是一种独立的渲染机制，可以避免一些布局问题，并提供更好的可控性，让开发者可以更加灵活地进行布局设计。
