零基础教你学前端——88 BFC

本次，我们来讲解 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 了。