BFC 简述

BFC 是什么

BFC 全称为块级格式化上下文（Block Formatting Context），BFC 是 W3C CSS2.1 规范中的一个概念。
它决定了元素如何对其内容进行定位以及与其它元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context 提供了一个环境，HTML 元素在这个环境中按照一定规则进行布局。
一个环境中的元素不会影响其它环境中的布局。比如浮动元素会形成 BFC，浮动元素内容的子元素主要受该浮动元素影响，两个浮动元素之间是互不影响的。
可以说 BFC 就是一个作用范围，把它理解成一个独立的容器，并且这个容器里 box 的布局与这个容器外的 box 毫不相干。

触发 BFC 的条件

• 根元素或其它包含它的元素
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素具有 position: absolute|fixed）
• 内联块（元素具有 display: inline-block）
• 表格单元格（元素具有 display: table-cell，HTML 表格单元格默认属性）
• 表格标题（元素具有 display: table-caption，HTML 表格标题默认属性）
• 具有 overflow 且值不是 visible 的元素
• 弹性盒子（flex 或 inline-flex）

BFC 的约束规则

• 内部的盒子会在垂直方向一个接一个排列（可以看作 BFC 中有一个常规流）
• 处于同一个 BFC 中的元素互相影响，可能会发生外边距重叠。
• 每个元素的 margin box 的左边，与容器块 border box 的左边相接触（对于从左往右格式化，否则相反），即使存在浮动也是如此。
• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响外面的元素，反之亦然。
• 计算 BFC 的高度时，考虑 BFC 所包含的所有元素，连浮动元素也参与计算。
• 浮动盒区域不叠加到 BFC 上。

BFC 可以解决的问题

垂直外边距重叠问题

<style>
    .div1 {
        background-color: red;
        height: 50px;
        margin-bottom: 10px;
    }

    .div2 {
        background-color: blue;
        height: 50px;
        margin-top: 20px;
    }
</style>

<div class="div1"></div>
<div class="div2"></div>

此时，div1 和 div2 垂直间距为较大的 20px，而非预期的 20px + 10px。

将其中一个 div 包裹在 BFC 中，即可解决此问题。

<style>
    .box {
        overflow: hidden;
    }

    .div1 {
        background-color: red;
        height: 50px;
        margin-bottom: 10px;
    }

    .div2 {
        background-color: blue;
        height: 50px;
        margin-top: 20px;
    }
</style>

<div class="box">
    <div class="div1"></div>
</div>
<div class="div2"></div>

清除浮动

<style>
    .box {
        border: 1px solid black;
    }

    .float {
        float: left;
         200px;
        height: 200px;
        background-color: red;
    }
</style>

<div class="box">
    <div class="float">1</div>
    <div class="float">2</div>
    <div class="float">3</div>
</div>

在浏览器中预览，可以清除看到子元素没有将父元素撑开。此时让父元素形成 BFC 即可清除浮动带来的影响。

<style>
    .box {
        border: 1px solid black;
        overflow: hidden;
    }

    .float {
        float: left;
         200px;
        height: 200px;
        background-color: red;
    }
</style>

<div class="box">
    <div class="float">1</div>
    <div class="float">2</div>
    <div class="float">3</div>
</div>