css的float高度塌陷解决

当使用 float 属性时，元素会从文档的正常流中脱离，导致父元素的高度无法被子元素撑开，从而产生高度塌陷的问题。解决方法有以下几种：

1. 使用 clear 属性清除浮动：在父元素的最后一个子元素后添加一个空的 div 元素，并设置 clear 属性为 both。

<div style="clear: both;"></div>

2. 使用 overflow 属性自动撑开高度：在父元素中添加 overflow 属性，并设置值为 auto 或 hidden。

.parent {
  overflow: auto;
}

3. 使用伪元素清除浮动：在父元素中添加一个伪元素，然后清除浮动。

.parent::after {
  content: "";
  display: table;
  clear: both;
}

需要注意的是，以上方法都需要给父元素设置高度，否则父元素的高度仍然会塌陷。