CSS 系列之BFC

发表于 分类于 阅读次数： 1.9k 5 分钟
CSS 系列的第四篇文章，BFC，相信，同学们都听过 BFC 吧，但是它到底是什么呢？我们一起来看看吧！

什么是 BFC？

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

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

简单来说，就是 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 下外边距会发生折叠

1
2
3
4
5
6
7
8
9
10
11
12
.box {
  width: 100px;
  height: 100px;
}
.first {
  margin-bottom: 100px;
  background-color: orange;
}
.second {
  margin-top: 50px;
  background-color: wheat;
}
1
2
3
4
<body>
  <div class="box first"></div>
  <div class="box second"></div>
</body>

BFC1

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  overflow: hidden;
}
.box {
  width: 100px;
  height: 100px;
}
.first {
  margin-bottom: 100px;
  background-color: orange;
}
.second {
  margin-top: 50px;
  background-color: wheat;
}
1
2
<div class="container"><div class="box first"></div></div>
<div class="container"><div class="box second"></div></div>
BFC2

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

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

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

1
2
3
4
5
6
7
8
9
10
.box {
  border: 2px solid #999;
  width: 200px;
}
.child {
  width: 100px;
  height: 100px;
  float: left;
  background-color: orange;
}
1
2
3
<div class="box">
  <div class="child"></div>
</div>

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

BFC3

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

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

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

BFC4

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

相关文章推荐
-------------------- 本文结束 感谢阅读 --------------------