BFC块级格式化上下文

BFC（边距重叠解决方案）

BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域。

另外还有个概念叫IFC。不过，BFC问得更多。

BFC 的原理/BFC的布局规则【非常重要】

BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：

  1. BFC 内部的子元素，在垂直方向，边距会发生重叠。
  2. BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看举例1）
  3. BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。（稍后看举例2）
  4. 计算BFC的高度时，浮动的子元素也参与计算。（稍后看举例3）

如何生成BFC

有以下几种方法：

  • 方法1：overflow: 不为visible，可以让属性是 hidden、auto。【最常用】
  • 方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
  • 方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。
  • 方法4：display为inline-block, table-cell, table-caption, flex, inline-flex

BFC 的应用

**举例1：**解决 margin 重叠

当父元素和子元素发生 margin 重叠时，解决办法：给子元素或父元素创建BFC。

比如说，针对下面这样一个 div 结构：

1
2
3
4
<div class="father">
    <p class="son">
    </p>
</div>

上面的div结构中，如果父元素和子元素发生margin重叠，我们可以给子元素创建一个 BFC，就解决了：

1
2
3
4
<div class="father">
    <p class="son" style="overflow: hidden">
    </p>
</div>

因为第二条：BFC区域是一个独立的区域，不会影响外面的元素。

举例2：BFC区域不与float区域重叠：

针对下面这样一个div结构；

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
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .father-layout {
            background: pink;
        }

        .father-layout .left {
            float: left;
            width: 100px;
            height: 100px;
            background: green;
        }

        .father-layout .right {
            height: 150px;  /*右侧标准流里的元素，比左侧浮动的元素要高*/
            background: red;
        }

    </style>
</head>
<body>

<section class="father-layout">
    <div class="left">
        左侧，生命壹号
    </div>
    <div class="right">
        右侧，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
    </div>
</section>

</body>
</html>

效果如下：

上图中，由于右侧标准流里的元素，比左侧浮动的元素要高，导致右侧有一部分会跑到左边的下面去。

如果要解决这个问题，可以将右侧的元素创建BFC，因为第三条：BFC区域不与float box区域重叠。解决办法如下：（将right区域添加overflow属性）

1
2
3
<div class="right" style="overflow: hidden">
    右侧，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
</div>

上图表明，解决之后，father-layout的背景色显现出来了，说明问题解决了。

**举例3：**清除浮动

现在有下面这样的结构：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .father {
            background: pink;
        }

        .son {
            float: left;
            background: green;
        }

    </style>
</head>
<body>

<section class="father">
    <div class="son">
        生命壹号
    </div>

</section>
</body>
</html>

效果如下：

上面的代码中，儿子浮动了，但由于父亲没有设置高度，导致看不到父亲的背景色（此时父亲的高度为0）。正所谓有高度的盒子，才能关住浮动。

如果想要清除浮动带来的影响，方法一是给父亲设置高度，然后采用隔墙法。方法二是 BFC：给父亲增加 overflow=hidden属性即可， 增加之后，效果如下：

为什么父元素成为BFC之后，就有了高度呢？这就回到了第四条：计算BFC的高度时，浮动元素也参与计算。意思是，在计算BFC的高度时，子元素的float box也会参与计算