我们在前端开发中有时候设置子盒子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; */
这样就完美解决了外边距塌陷的问题
