BFC

什么是 BFC？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于定位方案中的普通流。

我们可以把具有 BFC 特性的元素看作为隔离了的独立容器，容器内的元素不会在布局上影响到外面的元素，并且 BFX 具有普通容器所没有的一些特性。

简单来说，就是 BFC 有一个自己的空间，在空间内怎么做，都不会影响外面。

BFC 原理

BFC 元素垂直方向的边距会发生重叠，属于不同 BFC 的外边距不会发生重叠。
BFC 区域不会与浮动元素的布局重叠。
BFC 元素是一个独立的容器，外面的元素不会影响到内部元素，同样，内部元素也不会影响外部元素。
浮动元素也会参与 BFC 高度的计算。

触发 BFC

只要元素满足下面任一条件即可出发 BFC 特性

body 根元素
浮动元素： float 除 none 以外的值
绝对定位元素：position 的 absolute 和 fixed
display 为 inline-block、table-cells、flex
overflow 除了 visible 之外的值 (如：hidden、auto、scroll)

BFC 特性及应用

1. 同一个 BFC 下外边距会发生折叠

.box {
  width: 100px;
  height: 100px;
}
.first {
  margin-bottom: 100px;
  background-color: orange;
}
.second {
  margin-top: 50px;
  background-color: wheat;
}

<body>
  <div class="box first"></div>
  <div class="box second"></div>
</body>

图1 - 同一个BFC下外边距发生折叠

从结果来看，两个 div 元素都处在同一个 BFC 容器下，也就是 body 根元素。所以 first 的下边距与 second 的上边距发生重叠，且保留大的值。所以两个元素之间的距离只有 100px，而不是 150px。

我们想要两个盒子不进行折叠，这时候只需要将两个盒子设置为 BFC 容器就可以了。

.container {
  overflow: hidden;
}
.box {
  width: 100px;
  height: 100px;
}
.first {
  margin-bottom: 100px;
  background-color: orange;
}
.second {
  margin-top: 50px;
  background-color: wheat;
}

<div class="container"><div class="box first"></div></div>
<div class="container"><div class="box second"></div></div>

这时候，两个盒子的垂直边距就变成了 150px。

2. BFC 可以包含浮动的元素（清除浮动）

浮动的元素会脱离标准文档流，我们看一个不设置 BFC 是的例子。

.box {
  border: 2px solid #999;
  width: 200px;
}
.child {
  width: 100px;
  height: 100px;
  float: left;
  background-color: orange;
}

<div class="box">
  <div class="child"></div>
</div>

我们来看看显示效果，这时候 box 容器没有出发 BFC，显示时 child 是有浮动起来的，脱离文档流。

由于 child 元素浮动，脱离了文档流，所以容器只剩下 4px 的高度。

现在我们让 box 触发 BFC，这时候就会将浮动元素包裹起来。

.box {
  border: 2px solid #999;
  width: 200px;
  overflow: hidden;
}

我们看到，我们给 box 容器设置 overflow: hidden 触发 BFC，将浮动元素也包裹进 box 元素，清除了浮动效果。

hzzzzzzzq / Blog

CSS 系列 - 3. BFC #26

BFC

什么是 BFC？

BFC 原理

触发 BFC

BFC 特性及应用