BFC（边距重叠解决方案）

BFC基本概念：块级格式化上下文。
BFC的原理：

1. 在BFC这个元素的垂直方向的边距发生重叠；
2. BFC的区域不会与浮动元素的box重叠，用来清除浮动；
3. BFC在页面上是一个独立的容器，不受外部元素影响，也不影响外部元素；
4. 计算BFC高度的时候浮动元素也会参与计算。

如何创建BFC？

    overflow： hidden/auto
    float： none
    position的值不是relative，static
    display：inline-block/table-cell 和table相关的

BFC的使用场景：

<!-- 实例题（根据盒模型解释边距重叠）：-->
<section id="sec">
    <style>
        #sec {
            background: red;
            overflow: hidden; /*添加这个属性会创建一个BFC（块级格式化上下文）*/
        }

        .child {
            height: 100px;
            margin-top: 10px;
            background: yellow;
        }
    </style>
    <article class="child">

    </article>
</section>

<!--BFC垂直方向边距重叠-->
<section class="margin">
    <style>
        .margin {
            background: pink;
            overflow: hidden;
        }

        .margin > p {
            margin: 5px auto 25px;
            background: red;
        }
    </style>
    <p>1</p>
    <!--解决边距重叠给子元素添加一个父元素（再给父元素创建一个BFC）-->
    <div style="overflow: hidden;">
        <p>2</p>
    </div>
    <p>3</p>
</section>

<!--BFC的区域不会与浮动元素的box重叠，用来清楚浮动(创建一个BFC解决与浮动元素重叠)-->
<section id="layout">
    <style>
        #layout{
            background: red;
        }
        #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
        }

        #layout .right{
            height: 110px;
            background: yellow;
            overflow: auto;
        }
    </style>
    <div class="left"></div>
    <div class="right"></div>
</section>

<!--计算BFC高度的时候浮动元素也会参与计算（子元素即使是float也会参与高度计算）-->
<section id="float">
    <style>
        #float{
            background: red;
            /*overflow: auto;*/
            float: left;
        }
        #float .float{
            float: left;
            font-size: 30px;
        }
    </style>
    <div class="float">
        我是浮动元素
    </div>
</section>

如果此文对你有用请动动你的小手点个赞！谢谢！！！