解决嵌套盒子外边距塌陷的问题

嵌套关系的两个盒子，如果给子盒子加一个外边距，会导致外边距塌陷

列子：

再.box1里面嵌套一个.box2然后给子盒子加一个外边距想让其下移，会导致外边距塌陷。

.box1 {
height: 500px;
width: 500px;
background-color: slateblue;
}
.box2 {
height: 200px;
width: 200px;
background-color: yellowgreen;
margin-top: 100px;
}

塌陷指的是父盒子也会跟着子盒子一起下移的现象

解决塌陷的方法：

/* 解决塌陷的方法 /
/ 1.给父盒子加上边框（会撑大盒子） /
/ border-top: 1px solid transparent; /
/ 2.给父盒子加内边距(会撑大盒子) /
/ padding-top: 1px; /
/ 3.给父盒子加 overflow: hidden;(不会撑大盒子) /
/ 溢出隐藏 /
/ overflow: hidden; */