对于 BFC 的理解

发表于 更新于 分类于

块格式化上下文是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
通俗来讲，BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。
如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
一般来说根元素是一个 BFC 区域，浮动和绝对定位的元素也会形成 BFC，display 属性的值为 inline-block、flex 这些属性时也会创建 BFC。还有就是元素的 overflow 的值不为 visible 时都会创建 BFC。

BFC 布局规则

  1. 在 BFC 下，内部的 Box 会在垂直方向，一个接一个地放置。
  2. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
  3. 在 BFC 中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。
  4. BFC 的区域不会与 float box 重叠。
  5. 计算 BFC 的高度时，浮动元素也参与计算

触发 BFC

  • 根元素
  • 浮动元素，float 除 none 以外的值
  • 绝对定位元素，position（absolute，fixed）
  • display 为以下其中之一的值 inline-block, table-cell, table-caption, flex,inline-flex
  • overflow 除了 visible 以外的值（hidden，auto，scroll）

BFC 的应用

  1. 解决浮动塌陷问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  .parent {
    border: 2px solid #428bca;
  }

  .child {
    width: 100px;
    height: 100px;
    float: left;
    background: #3bd49e;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候，那么它的高度就会塌缩为零。解决这种问题，可以为其父元素创建 BFC。

1
2
3
4
.parent {
  border: 2px solid #428bca;
  overflow: auto;
}
  1. 自适应两栏布局

我们还可以运用 BFC 可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  div {
    width: 300px;
  }
  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: black;
  }
  .main {
    height: 200px;
    background-color: red;
  }
</style>
<div class="aside"></div>
<div class="main"></div>

如果我们需要将黑色区域撑到红色的左边，就需要利用规范的第四条：
BFC 的区域不会与 float 重叠：

1
2
3
4
5
.main {
  overflow: hidden;
  height: 200px;
  background-color: red;
}

这时候左栏宽度固定，右栏宽度会随着浏览器宽度的调整而调整，从而实现一个自适应两栏布局。