BFC的含义及作用

chun

2021-12-29

CSS 前端笔记

1.BFC是什么

BFC 的全程为块格式化上下文（Block Formatting Context），在 MDN 定义如下：

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

简单理解为，BFC 是一个完全独立的盒子，内部的元素无论样式是什么，都不会影响到盒子外部的布局。

BFC本质上还是一个block级别的元素盒子的宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。但BFC不会独占一行。

2.怎样触发BFC

浮动元素（float不为none）
固定定位、绝对定位元素（position为absolute或fixed）
行内块元素（display: inline-block）
弹性元素（display: flex）
网格元素（display: grid）
overflow: hidden

3.BFC的规则

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠

4.BFC解决了什么问题

1. 外边距塌陷

两个盒子，外边距margin都设置为50px，理应两个盒子的间距应该为100px，但其真实间距为50px。

这是因为发生了外边距塌陷问题，两个盒子的margin重叠到了一起，相互影响。

<style>
    .son {
        width: 100px;
        height: 100px;
        background-color: blue;
        margin: 50px;
    }
</style>
<body>
    <div class="son"></div>
    <div class="son"></div>
</body>

可以利用 BFC 特性来解决外边距塌陷问题。将这两个盒子，分别放入两个 BFC 区域中，因为 BFC 是一个完全独立的盒子，内部的元素不会影响到外部区域。

将以上代码修改为如下即可解决，两盒子间距变为100px：

<style>
    .father {
        background-color: yellow;
        /* 触发BFC */
        overflow: hidden;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: blue;
        margin: 50px;
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="father">
        <div class="son"></div>
    </div>
</body>