curTain

从 BFC 解决的问题看待 BFC…..

1. BFC是什么?

查阅了一些资料,觉得这个解释很合理:

Block fomatting context = block-level box + Formatting Context

BFC 定义

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

2. BFC的作用

  1. 解决 margin 重叠问题(父子重叠、兄弟重叠)
  2. 和浮动元素产生边界
  3. 解决浮动元素的父元素高度塌陷

总的来说,就是 BFC 布局规则的作用….

3. BFC布局规则:

  1. 内部的 Box 会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
  3. 每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。(这说明BFC中子元素不会超出他的包含块,而 position 为 absolute 的元素可以超出他的包含块边界)
  4. BFC的区域不会与 float box 重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算 BFC 的高度时,浮动元素也参与计算

4. 哪些元素会生成BFC?

  1. 根元素
  2. float属性不为none
  3. position为absolute或fixed
  4. display为inline-block, table-cell, table-caption, flex, inline-flex
  5. overflow不为visible

5. BFC 的使用场景对应布局规则

5.1 清除 margin 重叠

由布局规则第二条:

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

margin 重叠示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
* {
padding: 0;
margin: 0;
}
.box1, .box2 {
font-size: 30px;
text-align: center;
color: #ccc;
padding: 20px;
height: 100px;
width: 300px;
border: 10px solid #ccc;
background-color: aquamarine;
}
.box1 {
margin: 50px;
}
.box2 {
margin: 20px;
}
</style>
<div class="box1">box1</div>
<div class="box2">box2</div>

运行效果

形成 BFC 解决重叠

在 box2 外包一个 wrap 元素,并形成 BFC。

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
27
28
29
<style>
* {
padding: 0;
margin: 0;
}
.box1, .box2 {
font-size: 30px;
text-align: center;
color: #ccc;
padding: 20px;
height: 100px;
width: 300px;
border: 10px solid #ccc;
background-color: aquamarine;
}
.box1 {
margin: 50px;
}
.box2 {
margin: 20px;
}
.warp {
overflow: hidden;
}
</style>
<div class="box1">box1</div>
<div class="warp">
<div class="box2">box2</div>
</div>

运行结果

5.2 和浮动元素产生边界

由布局规则第四条:

BFC的区域不会与float box重叠。

情况示例

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
<style>
* {
padding: 0;
margin: 0;
}
.warp {
background-color: red;
}
.float{
float: left;
width: 40px;
height: 40px;
background-color: #ccc;
}
</style>
<div class="warp">
<div class="float"></div>
<div class="text-box">
我是一些文字,我有很多的文字-------------------------------
我是一些文字,我有很多的文字-------------------------------
我是一些文字,我有很多的文字-------------------------------
我是一些文字,我有很多的文字-------------------------------
---------------------------------------------------------
-----------
</div>
</div>

运行结果

形成 BFC 和浮动元素产生边界

让 text-box 形成 BFC,使他浮动元素产生边界。

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
27
28
29
30
<style>
* {
padding: 0;
margin: 0;
}
.warp {
background-color: red;
}
.float{
float: left;
width: 40px;
height: 40px;
background-color: #ccc;
}
.text-box{
overflow: auto;
background-color: paleturquoise;
}
</style>
<div class="warp">
<div class="float"></div>
<div class="text-box">
我是一些文字,我有很多的文字-------------------------------
我是一些文字,我有很多的文字-------------------------------
我是一些文字,我有很多的文字-------------------------------
我是一些文字,我有很多的文字-------------------------------
---------------------------------------------------------
-----------
</div>
</div>

运行结果

5.3 解决浮动元素的父元素高度塌陷

由布局规则第六条:

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

高度塌陷的情况:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
* {
padding: 0;
margin: 0;
}
.warp {
background-color: red;
}
.float{
float: left;
width: 40px;
height: 40px;
background-color: #ccc;
}
</style>
<div class="warp">
<div class="float"></div>
</div>

运行结果

父元素形成 BFC 解决高度塌陷

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
* {
padding: 0;
margin: 0;
}
.warp {
background-color: red;
overflow: auto;
}
.float{
float: left;
width: 40px;
height: 40px;
background-color: #ccc;
}
</style>
<div class="warp">
<div class="float"></div>
</div>

运行结果

6. 参考材料

CSS什么是BFC?

史上最全面、最透彻的BFC原理剖析

MDN-块格式化上下文

实验代码

父元素形成 BFC 解决高度塌陷
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
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
}
.warp {
background-color: red;
overflow: auto;
}
.float{
float: left;
width: 40px;
height: 40px;
background-color: #ccc;
}
</style>
<div class="warp">
<div class="float"></div>
</div>
</body>
</html>

 评论