实例分析CSS中的BFC它是由CSS2.1规范定义的，全称为Block Formatting Context。通俗来理解

前言

我们知道CSS的基础模型为盒子，包括了块盒、行内盒、匿名盒，由display属性决定。那么盒子排布当然也有相关的一套标准，实现视觉格式化。今天要提及到的BFC就是块格式化上下文。

定义

它是由CSS2.1规范定义的，全称为Block Formatting Context。通俗来理解就是当元素被定义为块格式上下文的话，自身就形成了一个独立的盒子，让处于BFC内部的元素与外部的元素相互隔离

如何创建BFC

浮动
绝对定位
行内块级元素
overflow的值不为visible的元素
弹性盒子

总体来讲我们创建BFC是为了生成一个独立区域使得和其他盒子不互相干扰，那么我们来看一下实例

实例

重叠盒子

三个盒子来体现BFC，默认情况这边就不描述了

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .left {
        background: yellowgreen;    
        <!--这边加上透明色更好查看-->
        opacity: 0.5;
        width: 200px;
        height: 200px;
        <!--浮动创建BFC元素-->
        float: left;
    }
    .right {
        background: pink;
        width:400px;
        height: 100px;
    }
    .box {
        background: gray;
        height: 100%;
        margin-left: 50px;
    }
</style>
<div class="box">
    <div class="left">左边盒子</div>
    <div class="right">右边盒子</div>
</div>

效果图如下：

很明显我们可以看到浮动元素脱标直接覆盖到普通盒子上面，最主要的是它具有块格式上下文所占据的位置是自身的独立空间不受其他盒子外部盒子影响，所以我们可以看到右边盒子内容区域直接被“挤开了”
由于自身脱标父级盒子高度的定义也是以右边盒子为准，导致左边溢出父级

当我们将父级盒子创建BFC时那么它形成独立空间之后(前面所说任意创建方式都行,若是flex实现的话内部盒子也都有各自独立空间)当然不会让自己子元素“跑出去”，这样的话就可以更好的解释BFC特性，通过BFC我们就可以更好的理解到清除浮动的原理以及意义。

效果图如下：

margin塌陷现象

代码就省略了直接在上面demo中操作，在右边盒子之中加入三个标准盒子

.children {
    height: 20px;
    width: 20px;
    margin: 10px;
    background: #fff;
}

可以看到这边产生了margin塌陷现象（在盒子之间margin重叠了），要说其原因这边小编也不是很清楚，但要解决这样的问题就是要创建BFC来实现盒子独立出来然后就可以解决。

总结

在对BFC的查漏补缺之后对之前的一些知识以及盒子的视觉格式化有了一定的了解，这几个简明的案例虽然很丑陋（哈哈哈哈），但也能够说明问题了。

ending...