BFC介绍

一、BFC是什么？

BFC，全称 Block Formatting Context（块级格式上下文）。它是一个独立的渲染区域，只有块盒子（block-level box）参与。块级格式上下文规定了内部的块盒子是如何布局的，并且这个渲染区域与外部区域毫不相关。

个人理解：BFC就是为了形成一个完全独立的空间，空间内部子元素不会影响空间外元素的布局和结构

二、如何触发BFC？

根元素（HTML）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
更多请看 MDN

三、BFC解决了哪些问题？

解决浮动元素父元素高度坍塌问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
    <style>
        .father{
            width: 500px;
            padding: 30px;
            background-color: bisque;
        }
        .childern{
            height: 150px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="childern">childern1</div>
        <div class="childern">childern2</div>
        <div class="childern">childern3</div>
    </div>
</body>
</html>

如图：

如果子元素childern都设置为浮动 float:left，则会出现父布局高度坍塌的问题，如图

解决方案：

父元素设置float: left;或display: table-cell;或overflow: auto;或position 为 absolute 或 fixed等等，只要使用上面提到的属性，都可以触发BFC来解决父布局高度坍塌的问题

解决自适应布局的问题

以常见的两栏布局为例

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>BFC</title>
            <style>
                .father{
        
                }
                .childern1{
                    height: 150px;
                    width: 200px;
                    background-color: cadetblue;
                    float: left;
                }
                .childern2{
                    height: 150px;
                    background-color: cornflowerblue;
                    font-size: 30px;
                }
            </style>
        </head>
        <body>
            <div class="father">
                <div class="childern1">childern1</div>
                <div class="childern2">我是childern2我是childern2我是childern2我是childern2我是childern2我是childern2我是childern2我是childern2我是childern2我是childern2我是childern2我是childern2我是childern2我是childern2</div>
            </div>
        </body>
    </html>

效果如图：

当childern2里的内容高度超过childern1的时候就会形成文字环绕的效果，如图：

这样的布局显然不是我们要的,所以我们可根据第8条display: flow-root;设置children2，这样就没问题了。

当然也可以设置overflow: auto，但是布局会有滚动条，同理overflow: hidden，会隐藏我们的部分内容，会影响到我们布局本身，所以具体情况具体考虑，按照需求去取舍。

解决外边距垂直方向重合问题

兄弟元素之间外边距在垂直方向会取最大值而不是取两者之和，上代码

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>BFC</title>
            <style>
                .childern1{
                    height: 150px;
                    background-color: cadetblue;
                    margin-bottom: 20px;
                }
                .childern2{
                    height: 150px;
                    background-color: cornflowerblue;
                    margin-top: 30px;
                }
            </style>
        </head>
        <body>
            <div class="childern1">childern1</div>
            <div class="childern2">childern2</div>
            </div>
        </body>
    </html>

效果如图：

这样显然不是我们要的效果，所以我们还是需要触发BFC来形成一个独立的空间，所以需要给childern2外部增加一个父布局触发BFC，这样就可以让我们布局间隔按照我们需求所展示出来了，代码如下：

.father2{
    overflow: hidden;
}
<div class="father2">
    <div class="childern2">childern2</div>
</div>