聊聊 CSS 中的 BFC 是什么？

大家好，聊聊我是聊聊前端西瓜哥。今天来学习 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 主要有两个特性，我们来学习一下。云南idc服务商

特性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 高度计算。

很赞哦!（43595）