BFC理解以及常见使用场景

什么是BFC?

块格式化上下文（Block Formatting Context， BFC）是一块独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
通俗讲就是，BFC中的内部元素无论如何布局，都会在边界里面，不会影响外部区域。

常见的创建BFC的方式

• 浮动元素（float不为none）
• 绝对定位的元素（position为absolute或者fixed）
• overflow不为visible的块级元素
• display值为flex、 flow-root 、inline-block、table-cell等

常见应用场景

1. 清除浮动

浮动元素由于不占据文档流位置，故无法撑开父容器高度，会影响整体界面的布局。如下：

    .parent{
        border: 1px solid green;
    }
    .child{
       float: left;
       width: 100px;
       height:100px;
       border: 1px solid red;
    }

    <div class='parent'>
        <p>父容器</p>
        <div class='child'>子容器</div>
    </div>

浮动影响外部容器高度.png
为了清除浮动带来的影响，可为parent元素创建一个BFC，来包含浮动元素，使其不影响外部的布局。
则为parent设置overflow属性即可，使其overflow不为visible。
或者也可以设置display:flow-root属性，该属性可以创建一个无副作用的BFC。
设置overflow:hidden或者display:flow-root的布局.png

2. 外边距合并问题

垂直方向的两个相邻元素的外边距会发生叠加，叠加后的外边距为两者中外边距的最大值。
这样设计的意义：保持各个块之间上下间距的距离一致性，比如多个段落之间与顶部底部的边距保持一致。
比如：

    .topText{
        margin: 20px 0;
        border: 1px solid #ccc;
        width: 100px;
    }
    .btmText{
       margin: 20px 0;
       border:1px solid red;
       width: 100px;
    }

    <p class='topText'>上方文本</p>
    <p class='btmText'>下方文本</p>

外边距合并.png

如果想让上下的外边距都保留，互不影响，则需要创建一个BFC。
可以给某一p标签设置一个父容器，给该父容器创建一个BFC。这样里面的p元素就不会影响到外面的元素。

    .parent{
        overflow: hidden;
    }

    <p class='topText'>上方文本</p>
    <div class="parent">
        <p class='btmText'>下方文本</p>
    </div>

创建BFC后的布局.png

总结

BFC可以看成一个与外界隔离的容器，他会包裹住内部元素，不会影响到外界。

参考文献

什么是BFC？看这一篇就够了
MDN-块格式化上下文
CSS深入理解流体特性和BFC特性下多栏自适应布局