CSS高度塌陷是指当父元素的高度被子元素撑开时，父元素的高度却没有相应地增高，从而导致一些布局问题。
产生原因：
- CSS高度塌陷是指当父元素的高度被子元素撑开时，父元素的高度却没有相应地增高，从而导致一些布局问题
- 绝对定位元素：如果子元素被绝对定位，它将不会被视为正常流的一部分，因此也会导致高度塌陷。
解决：
- 清除浮动：在父元素上添加 clear: both; 可以清除浮动元素对父元素的影响；（不推荐）
- 为父元素添加 overflow: auto; 或 overflow: hidden;：这样父元素将被视为一个 BFC（块级格式化上下文），可以防止高度塌陷；
- 使用 Flex 布局：Flex 布局是一种可以轻松解决高度塌陷问题的布局方式。
- 父级div定义 height（不推荐只建议高度固定的布局时使用）
- 父级div定义 伪对象:after 和 zoom（IE8以上和非IE浏览器才支持:after；zoom(IE专有属性)可解决ie6,ie7浮动问题建议定义公共类，以减少CSS代码。）
