我们在前端开发中有时候设置子盒子margin-top时候会遇到后外边距塌陷的问题，比如说这样

我们明明是想要子盒子离顶部10px的，但是父盒子塌陷了

      .father {   width: 300px;        height: 300px;        background-color: pink;      }    

  .son {      width: 200px;        height: 200px;        background-color: orange;        margin-top: 10px;      }

一般遇到这种情况有四种处理方式 ,任选一种   

     方法一：为父元素设置border        /* border: 1px solid blue; */

     方法二：为父元素添加overflow：hidden；样式         /* overflow: hidden; */

     方法三：为父元素或者子元素声明浮动         /* float: left; */

      方法四：为父元素或者子元素声明绝对定位                /* position: absolute; */

这样就完美解决了外边距塌陷的问题