BFC是什么？它的应用场景是什么？-JXin的博客

什么是BFC？
为什么需要BFC？
如何触发BFC？
BFC 的实际应用

今天聊聊CSS中的一个神奇概念——BFC（Block Formatting Context）。如果你曾经被浮动元素搞得头疼，或者被奇怪的外边距折叠搞得抓狂，那这篇文章就是为你准备的。

什么是BFC？

BFC，中文叫块级格式化上下文。简单来说，它是一个独立的渲染区域，里面的元素布局不受外部影响，也不会影响外部。想象一下，你在一个透明的盒子里摆弄东西，盒子外面的人看不到你在干嘛，而你也不管外面发生了什么，这个盒子就是BFC。

为什么需要BFC？

BFC在解决各种CSS布局问题上非常有用，如浮动元素的清除、避免外边距折叠等。理解BFC的工作原理和触发条件，可以帮助我们更好地控制页面布局。

如何触发BFC？

根元素html自动是BFC。
float不为none。
position值为absolute或fixed。
display值为inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid。
overflow值不为visible。

BFC 的实际应用

清除浮动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .wrap {
      width: 500px;
      background-color: green;
    }
    .wrap .box {
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
  </style>
  <body>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

一个盒子在设置浮动之后，父元素就“看不到”他们了，会导致高度坍塌，这时候可以使用常规的清除浮动技术，也就是：

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

1
2
3
4
5

或者使用 BFC：

.clearfix {
	/* float: left; */
	/* overflow: hidden; */
	/* position: absolute; */
	/* position: fixed; */
	display: inline-block;
}

1
2
3
4
5
6
7

防止外边距折叠

相邻的两个元素外边距会折叠在一起，这时候也可以使用BFC来解决

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      width: 200px;
      height: 200px;
    }
    .box1 {
      margin-bottom: 200px;
      background-color: red;
    }
    .box2 {
      margin-top: 200px;
      background-color: yellow;
    }
  </style>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

BFC

这时候可以将其中一个box触发BFC就能解决这个问题