margin失效问题——嵌套块元素引起的外边距坍塌

当一个div嵌套了另一个div时，父盒子设置了外边距，如:margin-top:50px;内部的子盒子也设置一个外边距margin-top:100px时，会发现子元素并没有如预期所想，与父盒子有个边距。反而父盒子与相领的盒子的margin取了2者的最大值。
如下所示：

    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>

**预期：**父盒子距离顶部50px,第一个子盒子距离父盒子的上边框100px，距离第二个子盒子bottom+top，希望是150px。

    .father {
        margin-top: 50px;
        background-color: pink;
        width: 200px;
        height: 300px;
    }

    .son1 {
        margin-top: 100px;
        margin-bottom: 50px;
        background-color: yellow;
        width: 50px;
        height: 50px;
    }

    .son2 {
        margin-top: 100px;
        background-color: green;
        width: 50px;
        height: 50px;
    }

实际上：
第一个子盒子距离上边框100px，同时也带着父盒子也距离上边框100px。

第二个子盒子距离上一个是100px，不是预期的150px。

解决
1.父元素添加overflow:hidden;

 .father {
        margin-top: 50px;
        background-color: pink;
        width: 200px;
        height: 300px;
        overflow: hidden;
    }

2.父元素添加border

    .father {
        margin-top: 50px;
        background-color: pink;
        width: 200px;
        height: 300px;
        border-top: 1px solid transparent;
    }

3.父元素添加padding

    .father {
        padding-top: 1px;
        margin-top: 50px;
        background-color: pink;
        width: 200px;
        height: 300px;
    }