CSS 外边距塌陷解决方案

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

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .father {
    width: 300px;
    height: 300px;
    background: royalblue;
  }
  .son {
    width: 100px;
    height: 100px;
    background: pink;
    margin-top: 50px;
  }
</style>
<div class="father">
    <div class="son"></div>
</div>

解决方法：

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