块格式化上下文BFC（Block formatting context）包含快的容器不会影响外部元素功能一：爸爸管儿子用

developer.mozilla.org/zh-CN/docs/…

MDN

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

根元素（<html>）

浮动元素（元素的 float 不是 none）

绝对定位元素（元素的 position 为 absolute 或 fixed）

行内块元素（元素的 display 为 inline-block）

表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）

匿名表格单元格元素（元素的 display 为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）

overflow 计算值(Computed)不为 visible 的块元素

display 值为 flow-root 的元素

contain 值为 layout、content 或 paint 的元素

弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）

网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

张大佬

www.zhangxinxu.com/wordpress/2…

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响到外部的元素，所以，避免margin穿透啊，清楚浮动什么的也好理解了。

包含快的容器不会影响外部元素

功能一：爸爸管儿子

用BFC包住浮动元素（并不是清楚浮动，.clearfix才是清除浮动）

<style>
    .baba {
        border: 10px solid red;
        min-height: 10px;
        display: flow-root;
    }
    .erzi {
        background: green;
        float: left;
        width: 300px;
        height: 100px;
    }
</style>
<body>
    <div class="baba">
        <div class="erzi"></div>
    </div>
</body>

/* 父添加border，子不能冲出和影响父元素 */
<style>
    .baba {
        background: red;
        border-top: 10px solid blue; /* 必须 */
    }
    .erzi {
        margin-top: 100px;
        height: 100px;
        background: rgba(0, 255, 0, 0.5);
    }
</style>
<body>
    <div class="baba">
        <div class="erzi"></div>
    </div>
</body>

功能二：兄弟之间划清界限

用float+div做左右自适应布局

<style>
    .gege {
        float: left;
        width: 100px;
        min-height: 600px;
    }
    .didi {
        min-height: 600px;
        border: 5px solid green;
        display: flow-root;
    }
</style>
<body>
    <div class="gege"></div>
    <div class="didi"></div>
</body>