BFC（块级格式化上下文）

一、BFC定义：

BFC（块级格式化上下文）是 CSS 中的一个概念。

用于描述页面中块级元素如何布局、定位和相互影响。

BFC 是一个独立的渲染区域，具有一定的特性和行为。

二、BFC 具有以下特性：

内部的元素在垂直方向上按照顺序从上到下排列，不会出现浮动。

BFC 区域不会与浮动元素重叠。

BFC 区域会包含其内部所有元素的边界，不会因为子元素的浮动而塌陷。

BFC 区域对外部的浮动元素不会理会，即不会被浮动元素覆盖。

BFC 区域可以通过设置 overflow 属性为非 visible 值来创建。

三、BFC 主要用于解决一些常见的布局问题

例如：

（1）清除浮动：当父元素包含浮动的子元素时，如果不触发 BFC，父元素的高度会塌陷，造成布局混乱。可以通过设置父元素为 BFC 来解决这个问题。

（2）防止浮动元素覆盖：当浮动元素与其他元素发生重叠时，可以通过创建 BFC 区域来避免浮动元素的覆盖问题。

（3）自适应两栏布局：通过将容器元素设置为 BFC，可以实现两栏布局中的自适应高度效果。

四、常见触发 BFC 的方式有：

float 属性不为 none。

position 属性为 absolute 或 fixed。

display 属性为 inline-block、table-cell、table-caption 等。

设置 overflow 属性为非 visible 值（如 auto、hidden）。