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

BFC 特性

BFC 在 Web 页面上是一个独立的容器，容器内外的元素互不影响
和标准文档流一样，BFC 内的两个相邻块级元素垂直方向的边距会发生重叠
BFC 不会与浮动元素的盒子重叠
BFC 在计算高度时会把浮动元素计算进去

触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性（详细）：

根元素（<html>）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
display 为 inline-block、table-cells、flex、grid...
overflow 值不为 visible 的块元素（hidden、auto、scroll）
...

BFC 应用

清除浮动-高度塌陷

当父元素没有设置高度，且子元素为浮动元素的情况下，父元素会发生高度坍塌，上下边界重合，即浮动元素无法撑开父元素。为了解决浮动元素造成的父元素高度塌陷问题，可以将父元素设置成一个 BFC 来清除浮动，将父元素整体设置为 BFC 环境

元素浮动后发生重叠

由于 box1 发生浮动，box2 未发生浮动，而浮动元素由于脱离文档流，第一个盒子堆叠在第二个盒子上。

为了让两个元素不重叠，我们把右边的盒子设置成 BFC

外边距重叠

在标准文档流中，毗邻的两个或多个块级元素之间垂直方向的 margin 会合并成一个 margin，会取两个元素 margin 最大的那一个，这就是外边距重叠。

有三种情况会形成外边距重叠（Margin collapsing）：

同一层相邻元素之间
没有内容将父元素和后代元素分开
空的块级元素

而创建了块级格式化上下文（BFC）的元素，不会和它的子元素发生 margin 重叠。

父子外边距重叠

当子元素设置外边距的时候。父元素没有设置外边距。那么子元素设置的按个外边距。会使得两个元素一起移动。

原因：根据规范，一个盒子如果没有添加 BFC，那么它的上边距应该和其文档流中的第一个子元素的上边距重叠。

解决：通过给父容器添加overflow: hidden 属性，使之成为 BFC 。

同时解决高度塌陷和父子外边距重叠问题

/* clearfix 这个样式可以同时解决高度塌陷和外边距重叠问题
            直接用其即可,在受到影响的元素类中加，使其不受影响
            before(外边距重叠问题)需要12
            after(高度塌陷问题)需要123
        */
        .clearfix::before,.clearfix::after{
            content: "";
            display: table;//block解决不了外边距重叠问题
            clear: both;
        }

BFC及其应用