8招解决文档流中外边距叠加（溢出）问题（BFC解决方案）

相信很多学习前端的朋友都会遇到这样一个问题，当一个父元素和它的子元素同时写了margin-top或者margin-bottom属性时，好像只有父元素才会生效，而它的子元素却不会生效。很多朋友最开始遇到这个问题可能会不知所措，那么我今天就来给大家讲一下关于这个问题怎么解决。

首先，这个现象叫做：“外边距叠加（外边距溢出）”。那么要满足什么样的条件，才会发生这种现象呢？

三个条件：

1. 父元素没有上边框
2. 子元素的内容区域的上边沿与父元素的内容区域的上边沿重合
3. 父元素与子元素同时使用了margin-top或者margin-bottom

接下来，给大家举个例子，让大家能够明显的看出这种现象。

<div class="con">
          <div class="box1">子元素</div>
          父元素
</div>

<style>
        < !--父元素样式-->
        .con {
            width: 400px;
            height: 400px;
            margin-top: 50px;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            background-color: #ddd;
        }

        < !--子元素样式-->
        .box1 {
            width: 400px;
            height: 100px;
            margin-top: 50px;