CSS高度塌陷（或称为高度坍塌）是指在某些特定情况下，元素的高度无法被正确计算或显示的现象。这通常发生在具有浮动属性的元素或使用绝对定位的元素周围。
原因
高度塌陷通常发生在父元素包含着一个或多个浮动元素时。由于浮动元素被移出了正常的文档流，父元素无法正确计算其高度，导致父元素高度塌陷。
产生高度塌陷的原因通常有两种情况:
- 子元素使用了浮动或者绝对定位，导致父元素无法计算出子元素的高度。
- 当父元素的高度没有设置时，父元素的高度会自动调整为0，从而导致子元素的高度也变为0。
<style>
.father{
border: 1px solid;
}
.son{
width: 100px;
height: 100px;
background-color: red;
/* 以下两个情况会使子元素脱离文档流 从而使父元素高度塌陷 */
/* position: absolute; */
float: left;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>页面显示
如何解决？
使父元素也脱离文档流
使用浮动布局：将父元素也设置为浮动，这样它会自动计算和包含浮动元素的高度。
.father{
border: 2px solid blue;
/* 使父元素也脱离文档流 */
float: left;
}
.son{
width: 100px;
height: 100px;
background-color: red;
/* 以下两个情况会使子元素脱离文档流 从而使父元素高度塌陷 */
/* position: absolute; */
float: left;
} 
当子元素是因为浮动的原因产生问题的时候，我们也可以使用 overflow: hidden 来解决
overflow: hidden;
清除浮动(推荐)
在浮动元素后面添加一个带有clear属性的空元素，使其在浮动元素下面，从而触发父元素重新计算高度。在父元素上添加 clearfix 类名，并在需要清除浮动的子元素前添加一个带clearfix::after伪元素的样式。
.clearfix::after {
content: "";
display: table;
clear: both;
}
<div class="father clearfix">
<div class="son"></div>
</div>
使用flex布局
使用flexbox布局可以自动解决高度塌陷问题。
.father {
border: 2px solid blue;
display: flex;
}
以上是一些常见的解决高度塌陷问题的方法，具体应该根据实际情况选择适合的方法,还有哪些方法呢 欢迎补充。
