聊聊 CSS 中的 BFC 是什么？

2025-11-04 22:19:18分类：系统运维阅读(16669)

大家好，聊聊我是聊聊前端西瓜哥。今天来学习 BFC。聊聊

BFC，聊聊为 Block Formatting Context 的聊聊缩写，中文翻译为 块格式上下文。聊聊

BFC 是聊聊 Web 页面 CSS 渲染的一个机制，是聊聊块级盒子布局中产生的区域。

你可以将一个 BFC 可以理解为一个容器，聊聊里面的聊聊元素不会影响到容器外的布局。

怎样的聊聊元素属于 BFC?根元素，也就是聊聊 HTML 元素。浮动元素，聊聊即使用了 float 属性且值不为 none。聊聊绝对定位元素。聊聊块级容器(如 display 的值为 inline-blocks、table-cells、table-captions)。overflow 的网站模板值不为 visible 的元素。使用了 display: flow-root 的元素。这是新出的值，专门用来创建无副作用的 BFC。兼容性存疑，比较少用。

当然还有一些 CSS 属性也可以触发 BFC，但比较少见，这里就不一一列举了，读者可自行阅读 MDN 文档。

目前来说，最常见的是通过 overflow: hidden 来构建 BFC。一般情况下，它的副作用最小。但如果元素下有超出盒子范围的内容，会被截掉，请谨慎使用。

BFC 的特性

BFC 主要有两个特性，我们来学习一下。高防服务器

特性1：上下外边距重叠

同一个 BFC 下的两个相邻块级元素，会发生上下方向的 margin 重叠。

比如前一个 div 设置了 margin-bottom: 20px，下一个 div 设置了 margin-top: 10px，然后你会发现它们的上下距离其实是 20px(二者的最大值)，而不是 30px(二者之和)。

.container {

/* overflow: hidden; */

padding: 5px;

border: 1px solid #000;

}

.box {

float: left;

width: 100px;

height: 100px;

background-color: cornflowerblue;

}

</div>

上面的这种写法，没有给 container 应用 BFC，会导致容器元素高度塌陷，效果见下图左边。

当我们将 overflow: hidden 的注释去除，容器元素就应用了 BFC，就能得到我们想要的容器元素根据子元素自动撑高的效果了。效果见下图右边。

结尾

BFC 主要掌握它的两个特性就好了：

上下外边距重叠。浮动元素参与 BFC 高度计算。