什么是BFC？

MDN:

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

个人理解:

BFC就是一个封闭的盒子，盒子内部无论怎么折腾都不会影响到外部。

情况下会产生BFC？

下列方式会创建块格式化上下文：

根元素(``)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 ``column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

BFC布局规则特性

内部盒子会在垂直方向，一个接一个排列
同属一个BFC的两个相邻盒子的margin会发生重叠
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
计算高度时，浮动或者定位的元素也会参与计算。
不会影响到外面元素

BFC的作用

1.实现右侧栏盒子自适应

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            float: left;
            height: 300px;
             200px;
            background-color: red;
        }

        .right {
            overflow: hidden;
            height: 500px;
             100%;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

</html>

页面渲染如图:

2.解决外边距合并问题

同属一个BFC的两个相邻盒子的margin会发生重叠

创建不属于同一个BFC，就不会发生margin重叠了。

3.清除浮动

当父盒子没有设置高度，子盒子浮动，就会发现高度崩塌的问题

父元素设为BFC

利用的就是BFC计算高度时，浮动或者定位的元素也会参与计算。

总结

BFC就是页面上一个隔离的独立的容器。容器里面的子元素不会在布局上影响到外面的元素。反之也是如此。例如外边距合并，浮动。