什么是div高度塌陷

div高度塌陷指的是当div元素内部的内容使用浮动或绝对定位进行布局时，父元素的高度无法自动适应子元素的高度的现象。这种现象会导致父元素的高度被压缩到仅包围其非浮动或非定位子元素的高度。当父元素的高度被压缩后，可能会影响整个页面的布局和样式。

造成div高度塌陷的原因主要有两个：浮动和绝对定位。浮动元素会脱离文档流，其他未浮动的元素会忽略其存在，导致父元素的高度无法正常撑开；绝对定位的元素相对于其最近的已定位祖先元素进行定位，也会导致父元素的高度塌陷。

为了解决div高度塌陷问题，可以使用以下方法：
1. 清除浮动：在父元素的末尾添加一个额外的空div或者使用CSS清除浮动的样式，例如`clear:both;`。
2. 使用clearfix：在父元素的CSS样式中添加`overflow: auto;`或者`overflow: hidden;`，同时给父元素添加`clearfix`类。
3. 设置父元素高度：给父元素设置一个固定高度或者最小高度，以确保其能够包含子元素的内容。
4. 使用flex布局：将父元素的display属性设置为flex，这样父元素会自动适应子元素的高度。
5. 使用CSS网格布局：将父元素的display属性设置为grid，子元素会自动填充父元素的区域。

通过以上方法，可以有效解决div高度塌陷的问题，确保页面的布局和样式能够正确展示。