CSS之BFC的理解

03-20· 4分钟

什么是 BFC

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

而 BFC（Block Formatting Contexts）即块级格式化上下文，是一个块级元素的渲染显示规则，属于元素定位方案中普通流的一种。可以把 BFC 理解为一个封闭的容器，容器里面的子元素不会影响到外面的元素，反之也如此。

元素定位方案

定位方案是控制元素的布局，常见方案有三种:

  • 普通流 (normal flow)

    在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

  • 浮动 (float)

    在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

  • 绝对定位 (absolute positioning)

    在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定

触发 BFC

BFC 的布局规则如下：

  • 内部的盒子会在垂直方向，一个个地放置

  • BFC 是页面上的一个隔离的独立容器

  • 属于同一个 BFC 的 两个相邻 Box 的 上下 margin 会发生重叠

  • 计算 BFC 的高度时，浮动元素也参与计算

  • 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此

  • BFC 的区域不会与 float 重叠

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

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

BFC 特性及应用

阻止外边距折叠 (margin collapse)

MDN 关于外边距折叠的定义：
当块级元素 (block) 的上外边距 (margin-top) 和下外边距 (margin-bottom) 同时都有设定时只会只会保留最大边距，这种行为称为边界折叠（margin collapsing），有时也翻译为外边距重叠。

比如以下代码:

1
2
3
4
<div class="container">
  <div class="block top"></div>
  <div class="block bottom"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.block {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}
.top {
  margin-bottom: 20px;
}

.bottom {
  margin-top: 30px;
}

两个垂直排列的元素，实际在页面上的距离是 30px，而不是 20px + 30px = 50px

关于外边距折叠的详细参考

根据 BFC 布局规则的第三条，之所以会发生折叠是因为它们同属于 body 这个根元素。

那么只需要把两个 div 元素放在不同的 BFC 容器里就可以避免折叠：

1
2
3
4
<div class="container">
  <div class="block top"></div>
</div>
<div class="block bottom"></div>

同时，container 类必须加上 overflow: hidden 属性。

1
2
3
4
5
{
  .container {
    overflow: hidden;
  }
}

清除浮动

正常情况下，浮动的元素会脱离文档流。

以下代码：

1
2
3
<div class="container">
  <div class="block"></div>
</div>
1
2
3
4
5
6
7
8
9
.container {
  border: 1px solid #000;
}
.block {
  width: 100px;
  height: 100px;
  background: #eee;
  float: left;
}

效果如下：

未清除浮动

由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。

1
2
3
4
.container {
  border: 1px solid #000;
  overflow: hidden;
}

清除浮动

阻止元素被浮动元素覆盖

以下代码：

1
2
<aside></aside>
<main></main>
1
2
3
4
5
6
7
8
9
10
11
aside {
  width: 100px;
  height: 150px;
  float: left;
  background: #555555;
}
main {
  height: 200px;
  width: 200px;
  background-color: lightblue;
}

效果如下：

浮动元素覆盖

这时候第二个元素有部分被浮动元素所覆盖。

之所以是这样，是因为规则 5： 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。

要想改变效果，使其互不干扰，就得利用规则 6 ：BFC 的区域不会与 float 重叠，在第二个元素的样式中加入 overflow: hidden，就会变成：

浮动元素覆盖

前端CSS