什么是外边距重叠：
当给子元素设置margin-top的时候 父元素会跟着移动
解决方法一
触发BFC 以下条件满足其一
float的值不为none
overflow的值不为visible。
position的值不为relative和static。
display的值为table-cell, table-caption, inline-block中的任何一个。
解决方法二
利用伪元素在父元素之前
/* 上外边距溢出 /
.div-parent::before {
display: table;
content: "";
}
/
* 下外边距溢出 */
.div-parent::after {
display: table;
content: "";
}
什么是高度坍塌
当父元素的高度是由子元素给撑开的时候，一旦子元素浮动脱离文档流，父元素的高度就没了
解决方法一
触发BFC 以下条件满足其一
float的值不为none
overflow的值不为visible。
position的值不为relative和static。
display的值为table-cell, table-caption, inline-block中的任何一个。
解决方法二
利用伪元素 在父元素最后
.box::after{ ****
content: '';
display: block;
clear: both;
}
.box::before{
content: '';
display: block;
clear: both;
}
