第一个子元素设置margin-top问题

<div class="body">
   最外层
   <div class="parent">
      <div class="child">子元素</div>
      父元素
   </div>
</div>


.body{
    background: yellow;
    .parent{
      width: 200px;
      height: 200px;
      background: red;
      .child{
        width: 100px;
        height: 100px;
        background: green;
        margin-top: 20px;
      }
    }
  }

问题：
有时当我们设置子元素child的margin-top，但是却发现子元素没有出现上外边距的效果，反而是父元素parent出现了上外边距的效果。

原因：
边距重叠：一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。

方法：

//1、给父元素添加border
.parent{
	border-top: 1px solid red;
}

//2、给父元素添加padding,子元素不用设置margin-top了

.parent{
	padding-top: 20px;
}

//3、给父元素添加overflow: hidden
.parent{
	overflow: hidden
}

//4、父级或子元素使用浮动或者绝对定位absolute
.parent{
	position:absolute;
}

ps ：方法3、4 是利用css 的BFC理念