共计 770 个字符，预计需要花费 2 分钟才能阅读完成。
本次，咱们来解说 CSS 中的一个重要概念 BFC。
BFC 为 Block Formatting Context 的缩写，中文翻译为块格局上下文。是什么意思呢？
在学习 CSS 边距的时候，咱们已经讲过一个 margin 塌陷的问题：相邻块元素垂直边距和嵌套块元素垂直边距邻接时边距会合并，最终边距等于两个 margin 值最大的那个。
实际上，浏览器解析边距合并的规定是由 W3C 制订的。翻阅 W3C 的官网，咱们看到这样一段内容，它形容了一个叫做块格局上下文的规定，咱们把这个规定简称为 BFC。如果一个元素触发了 BFC 规定，咱们也能够称他为 BFC 区域。
依据规定的形容咱们得悉，一个 BFC 区域和另一个 BFC 区域是互相独立且不会影响的。也就是说，如果容器外部的子元素呈现了上下边距，边距不会跑到里面去影响其余元素，而是在外部拉开距离。这就使得父元素变成了一个独立的区域。
BFC 规定还有一个十分重要的特点，就是如果元素被触发了 BFC 规定，那么浏览器在计算这个元素高度的时候，会把浮动元素也思考进去。这样一来，无论你有多少个浮动元素，都不必放心父元素没有高度了。
如此看来，BFC 还是给咱们带来不少益处的。那如何触发元素的 BFC 规定呢？
其实方法有很多，例如给元素减少浮动；给元素减少了相对定位；扭转元素的类型为 inline-block；扭转元素的 overflow 款式，只有这个值不等于默认值，就能够。
而在这些办法当中，最罕用的就是 overflow 属性了。无论是浮动、定位或者更改元素类型，都有可能大幅度的影响页面布局，而 overflow 这个属性则没有这方面的问题。
还记得咱们之前学过的如何打消浮动的影响吗？当初你应该明确了，为什么我在解决父元素高度塌陷的时候，写上一个 overflow: hidden 了。
本文配套教程链接：https://www.bilibili.com/vide…
