高度坍塌成因
父元素div未设置高度
子元素全部设置浮动(float: left | right;)，浮动元素脱离文档流且不占页面空间
由于父元素为设置高度，高度靠内部子元素撑开，而今子元素全部脱离文档流，所以此时父元素的高度为0，给父元素和子元素设置边框(border: 1px solid #000;)或者显示父元素轮廓(outline: 1px solid #000;)，会出现子元素超出了父元素的区域范围，即为：高度坍塌现象
解决方法
1 根据子元素的最大高度为父元素设置高度
前提是要知道子元素高度
2 父元素也设置为浮动
会影响父元素的兄弟元素，可能破坏原有的页面布局
3 父元素设置overflow: auto | hidden;属性
只要溢出的内容一律都会被隐藏，可能会隐藏不想被隐藏的部分
4 为父元素增加伪元素(推荐)
/**
.div-parent 为父元素类选择器
设置 content 为空，父元素最后一个伪元素子元素内容为空
clear: both 会清除该元素左右两端的所有的浮动元素，即该元素在父元素中处于所有子元素的最 下方，且存在于文档流中，占页面空间；父元素识别到该元素将会自适应高度
*/
.div-parent::after {
display: table;
content: "";
clear: both;
}
外边距溢出成因
父元素div未设置边框
第一个子元素设置了上外边距(margin-top: 10rem;)或者 最后一个子元素设置了下外边距(margin-bottom: 10rem;)
导致父元素与子元素一起发生相应的偏移的现象，即为：外边距溢出现象
解决方法
/**
设置外边距的元素不与父元素直接接触既不会一起发生偏移
而父元素前或后添加的伪元素子元素 content 为空，所以不会出现不希望看到的效果
*/
/** 上外边距溢出 */
.div-parent::before {
display: table;
content: "";
}
/** 下外边距溢出 */
.div-parent::after {
display: table;
content: "";
}
