场景：产生在嵌套元素中，给子元素一个上边距，父元素也跟着有了外边距，这就是外边距塌陷！！！

    1. <style>
    2.   * {
    3.     margin: 0;
    4.     padding: 0;
    5.   }
    6.   .father {
    7.     width: 300px;
    8.     height: 300px;
    9.     background: royalblue;
    10.   }
    11.   .son {
    12.     width: 100px;
    13.     height: 100px;
    14.     background: pink;
    15.     margin-top: 50px;
    16.   }
    17. </style>
    18. <div class="father">
    19.     <div class="son"></div>
    20. </div>

    外边距塌陷.png
    解决方法：

    1. 可以在父盒子也就是设置边框，此时margin将会相对于父盒子进行定位
    2. 给父盒子设置overflow:hidden，原因是overflow:hidden可以生成一个新的BFC，而子元素被它所包含了，他的margin不会影响到外面的元素