关于子元素的margin-top影响父元素

来看看这个问题“子元素为什么设置margin-top会影响父元素的margin-top。

<div class="box-father">

<div class="box-son">

</div>

</div>

先把html,body,div的默认margin，padding设为0,。
再给父元素设置宽高，子元素设置宽高。

div{margin:0;padding:0;}
.box-father{
     width:100px;
     height:100px;
     background:red;
}
.box-son{
     width:50;
     height:50px;
     background:blue;
}

然后又设置子元素的margin-top为20px。
效果如下

查了下，简单来说是因为父元素没有设置padding或者border时，第一个子元素会和父元素的margin-top重叠（w3c就这么规定滴，不用疑问为什么会这么做）。
解决方法就是
父元素设置padding
或者父元素设置border
或者父元素设置overflow
解决了^_^之前没遇到是因为这几个属性太常见了，设置的比较频繁...所以之前没遇到。