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>

 上一页

css

 评论