跳到主要内容

块级格式化上下文（BFC）

· 阅读需 4 分钟
不如怀念
不如怀念
Web 前端工程师 (Web Front-end Engineer)

最后更新于 2016-07-22 16:35:00

在进行页面布局时，通常有流式布局、定位布局、浮动布局这三种形式。而在布局过程中，各元素之间的影响却是一个很关键的问题。

BFC​

BFC（Block Formatting Context，块级格式化上下文）是 CSS 2.1 中的一个规范，在 CSS 3 中也称为 Flow Root。首先，BFC 是块级元素身上的一个特性，通常它是隐藏不生效的，但某些情况下它会显现出来：

  1. float 不为 none
  2. position 不为 static、relative
  3. overflow 不为 visible
  4. display 不为 table-cell、table-caption、inline-block、flex、inline-flex

只要满足上述任一条件，该块级元素身上的 BFC 特性即会显现出来。

BFC 特性​

BFC 特性所展现出来的效果可以通俗的总结为，**BFC 特性导致块级元素成为一个容器盒子，将会把容器内的元素与容器外的元素相互隔离（也就是说容器内外的元素之间不再发生相互作用）。**于是乎，我们就可以说该容器内的所有元素都处在了同一个块级格式化上下文中，只有它们之间才会发生相互作用。

清除 margin 重叠​

最典型的相互作用就是两个相邻的块级元素垂直方向上的 margin 值会发生重叠并取最大值。当我们为其中一个元素包裹一个 div 元素并使该元素的 BFC 显现（例如 overflow:hidden）时，我们会发现原先两个元素在垂直方向上的 margin 值已不再重叠，这也就是说明它们之间已不存在相互作用。

清除 float 覆盖​

当一个元素 float 设置不为 none 时，该元素将会浮动起来脱离文档流，导致它后面的非浮动元素前移，从而自己覆盖在前移的元素上。这时候，当我们使它后面的非浮动元素 BFC 特性显现（例如 overflow:auto）时，我们就会发现这些元素不会前移了。

float 包含​

同样地，当父元素的高度没有设置，子元素浮动起来后，父元素的 height 依然为 0。这时候，我们使父元素的 BFC 特性显现（例如 float:left）时，我们会发现父元素的高度被浮动的子元素撑起来了，也就是父元素将浮动子元素包含了起来。

清除文字环绕​

当一个浮动元素后面跟了个 <p> 元素且内部有大量文字，这些文字会产生环绕效果，也就是环绕在浮动元素周围。我们可以使该 p 元素的 BFC 特性显现（例如 overflow:hidden），然后我们就可以看到文字全部显示在了侧边，而不会再环绕在该浮动元素上下方，也就是类似评论功能中头像与评论文字两侧布局的效果。

结语​

事实上，BFC 特性还有许多其它的妙用，我们在开发过程中可以多尝试，挖掘它新的技巧。