【CSS知多少-3】边距重叠问题怎么解决？--BFC块级格式化上下文

1.边距重叠示例

• 父子元素边距重叠

<section id="sec">
    <style media="screen">
        #sec{
            background-color: red;
        }
        .child{
            height: 100px;
            margin-top: 10px;
            background: yellow;
        }
    </style>
    <article class="child"></article>
</section> 

问题：有时当我们设置子元素的margin-top，但是却发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。
原因：边距重叠，一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有添加BFC，那么它的上边距应该和其文档流中的第一个子元素的上边距重叠。

• 兄弟元素边距重叠

<section id="margin">
    <style>
    #margin{
        background-color: pink;
        overflow:hidden;
    }
    #margin>p{
        margin: 5px auto 25px;
        background-color: red;
    }
    </style>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</section>

此处粉色间距均为25px。
问题：某元素A下边距25px，其兄弟元素B上边距5px，则二者合并为25px(取最大值)。
原因：兄弟元素边距重叠，取重叠部分最大值。

• 与float元素内容重叠

<section id="layout">
    <style>
        #layout{
            background-color: red;
        }
        #layout .left{
            float:left;
            width: 100px;
            height: 100px;
            background-color: purple;
        }
        #layout .right{
            height: 110px;
            background-color: #ccc;
        }
    </style>
    <div class="left"></div>
    <div class="right"></div>
</section>

问题：右侧元素.right把背景色红色覆盖。
原因：右侧元素.right与左侧浮动元素.left的box重叠。

2.BFC解决边距重叠问题

BFC定义：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

• 解决父子元素边距重叠

<!-- BFC解决父子元素边距重叠的问题  -->
<section id="sec">
    <style media="screen">
        #sec{
            background-color: #f00;
            overflow: hidden; <!--BFC-->
        }
        .child{
            height: 100px;
            margin-top: 10px;
            background: yellow;
        }
    </style>
    <article class="child"></article>
</section> 

原理：BFC在页面上是一个独立的容器，父子/外部内部互不影响。

• 解决兄弟元素边距重叠

    <!-- BFC解决兄弟元素边距重叠的问题  -->
    <section id="margin">
        <style>
        #margin{
            background-color: pink;
            overflow:hidden;
        }
        #margin>p{
            margin: 5px auto 25px;
            background-color: red;
        }
        .new{
            margin: 5px auto 25px;
            background-color: red;
        }
        </style>
        <p>1</p>
        <!-- 解决垂直方向边距重叠，增加父元素并设置overflow属性为hidden -->
        <div style="overflow:hidden">    
            <p class="new">2</p>
        </div>
        <p>3</p>
    </section>

粉色边距由上至下依次为5,30,30,25。
原理：BFC垂直方向边距不会发生重叠。

• 解决与float元素内容重叠

    <!-- BFC元素不与float元素的内容重叠 -->
    <section id="layout">
        <style>
            #layout{
                background-color: red;
            }
            #layout .left{
                float:left;
                width: 100px;
                height: 100px;
                background-color: purple;
            }
            #layout .right{
                height: 110px;
                background-color: #ccc;
                overflow: auto;  /* 创建BFC ，利用BFC元素不与float元素内容重叠 */
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>

原理：BFC区域不会与浮动元素的box重叠。

• BFC子元素即使是float也会参与高度计算

<section id="float">
    <style>
        #float{
            background-color: purple;
            overflow:auto;  /* 设置BFC清除浮动 */
            /* float:left; */
        }
        #float .float{
            float: left;
            font-size:30px;
        }
    </style>
    <div class="float">我是浮动元素</div>
</section>

原理：计算BFC高度时，浮动子元素也会参与运算。

创建BFC的方法：

1. overflow: hidden/scroll/auto(不为visible)
2. float不为none
3. position为absolute或者fixed
4. display为inline-block、table、table-cell、table-caption、flex、inline-flex。

BFC的使用场景:

1. 解决边距重叠问题；
2. 清除浮动（计算BFC高度时，浮动子元素参与计算）；
3. 避免某元素被浮动元素覆盖（兄弟元素中有高度不一的浮动元素，不占位）；
4. 避免多列布局由于宽度计算四舍五入而自动换行