BFC 究竟是个什么东西BFC是个啥玩意？要我来说：BFC 是css的块级作用域，就是一种布局的模式。（js有块级作用

BFC是个啥玩意？

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

要我来说：BFC 是css的块级作用域，就是一种布局的模式。（js有块级作用域，css也有自己的块级作用域。好耶！）

BFC有哪些特点呢？

BFC内的元素不会受到外部元素的影响，也不会影响到外部元素。
内部的块级元素会在垂直方向上一个接一个地排列，它们之间的间距由它们的margin决定
如果两个相邻的块级元素有重叠的margin，那么它们的外边距会折叠，即取两个外边距中的较大值作为最终的外边距。

那么该如何创建一个BFC呢？

display属性是 flow-root、inline-block
contain 属性是 layout、content 或 paint 的元素
overflow 属性是 hidden、auto或 scroll
绝对定位元素（元素的 position 属性是 absolute 或 fixed ）
还有一堆不想写了。。。。。。。。

BFC有啥用？帮我们解决了什么问题？

清除浮动 - 子元素使用flot，导致父元素高度塌陷 | 溢出父元素的边界

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
</head>
<body>
    <div class="parent-box">
        <div class="child">
            我是内部文本我要再里面，我是内部文本我要再里面，
            我是内部文本我要再里面，
            我是内部文本我要再里面，我是内部文本我要再里面
        </div>
    </div>

</body>


<style>
    .parent-box {
        background-color: rgb(42, 61, 165);
        padding: 20px;
    }

    .child {
        float: left;
        font-size: 18px;
        padding: 10px;
        color: rgb(235, 235, 235);
        background-color: brown;
    }
</style>
</html>

就像这样

给红色区域设置 float 后蓝色区域的的高度没有被撑开，红色区域的内容溢出了。这是我们来给蓝色区域创建成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>
</head>
<body>
    <div class="parent-box">
        <div class="child">
            我是内部文本我要再里面，我是内部文本我要再里面，
            我是内部文本我要再里面，
            我是内部文本我要再里面，我是内部文本我要再里面
        </div>
    </div>

</body>


<style>
    .parent-box {
        background-color: rgb(42, 61, 165);
        padding: 20px;
        /* 使用overflow 创建一个BFC，这样就能保证文本不会溢出，高度不会塌陷了 */
        overflow: hidden;
        /* display: flow-root; */
    }

    .child {
        float: left;
        font-size: 18px;
        padding: 10px;
        color: rgb(235, 235, 235);
        background-color: brown;
    }
</style>
</html>

完美搞定问题

实现双列布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
</head>

<body>


    <section>
        <div class="float">
            我在左边,我可以拖动哦
        </div>
        <div class="box">
            <p>我要在右边，但是我没有实现 </p>
        </div>
    </section>
    <section>
        <div class="float">
            我在左边，我可以拖动哦
        </div>
        <div class="box" style="display:flow-root">
            <p>我要在右边，我是用 display:flow-root 实现了</p>
        </div>
    </section>

</body>


<style>
    section {
        height: 250px;
    }

    .box {
        background-color: #d4fffd;
        border: 5px solid #35ad85;
    }

    .float {
        width: 250px;
        height: 150px;
        padding: 10px;
        margin-right: 25px;
        border: 2px solid #c71a1a;
        float: left;
        overflow: hidden;
        background-color: #ffc1c11e;
        resize: both;
    }
</style>

</html>

总结

没有啥总结的