网站空格键代码中山市区做网站公司
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;
}
以上是一些常见的解决高度塌陷问题的方法，具体应该根据实际情况选择适合的方法,还有哪些方法呢 欢迎补充。