CSS外边距塌陷

原理: 互相嵌套的两个块元素，当给子元素设置margin-top时，会作用在父级元素上，导致父元素一起向下

.box1 {
      width: 500px;
      height: 500px;
      background-color: pink;
      }
           
.box2 {
      width: 300px;
      height: 300px;
      background-color: blue;
      /* 外边距塌陷 */
      margin-top: 20px;
    }

方法1：设置父元素上边框或者上内边距(分隔子元素的margin-top)

//给父盒子设置上边框
 border-top: 1px solid transparent;
//给父盒子设置上内边距
 padding-top: 1px;

方法2：设置overflow:hidden（推荐）

overflow: hidden;

方法3：转化为行内块元素

display: inline-block;

方法4：设置浮动

float: left;