CSS之BFC的理解

什么是 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,就会变成:

浮动元素覆盖