css外边距margin塌陷问题与解决方案

                           css外边距margin塌陷问题与解决方案
我们先来了解一下什么是外边距的塌陷，再来论解决方案。首先，外边距的塌陷是在标准流中，具体包括两个方面
1.父级与子级之间的塌陷:当子盒子设置margin-top后，我们首先想到的是子盒子会相对于父盒子向下移动，但是父盒子也会跟着掉下来，这就是
父子级之间的塌陷。
示例1:第一步先准备两个盒子:
    .father{
        width: 300px;
        height: 300px;
        background-color: aqua;
    }                                                              

    .son{
        width: 100px;
        height: 100px;
        background-color: blue;   
    }

第二步，如果我想让子盒子相对于父盒子向下移动50px,于是乎 我在加了子盒子里加margin-top: 50px;但是并没有出现我们想象的那样子盒子相对于父盒子向下移动50px，而是一起向下移动了50px,即这时外边距出现了塌陷
.son{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 50px;
}

第三步，对于父子级之间的塌陷，我们可以采取以下策略来解决
1,给父盒子添加overflow: hidden;
2.给父盒子添加padding-top
3.给父盒子添加border-top