margin-top的bug（传递问题）

当父子元素都是标准流文档的元素时，给子元素设置margin-top，margin-top会传递到父元素上。如下代码图片所示

<div class="father">
    <div class="son"></div>
</div>
<style>
    .father{
        width:600px;
        height:400px;
        background:red;
    }
    .son{
        width:200px;
        height:200px;
        background:yellow;
        margin-top:100px
    }
</style>

 

 解决办法：

1.使父元素脱离标准文档流 。 设置float

2.给父元素设置 overflow：hidden