父元素下子元素都是浮动元素引起的高度塌陷

如果子元素使用了float属性，那么这些子元素会脱离常规文档流。

父元素的高度将只包含未浮动的子元素的高度，或者如果所有子元素都浮动了，父元素的高度可能会坍塌至0。

解决方法

1. 清除浮动（Clearfix）：在父元素中添加一个清除浮动的类，确保父元素扩展到包含所有浮动子元素的高度。

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

2.使用overflow属性：将父元素的overflow属性设置为hidden或auto，这将使父元素扩展到包含浮动子元素的高度。

.parent {
  overflow: auto;
}

3.使用flexbox或grid布局：将父元素设置为display: flex或display: grid，并适当配置子元素的对齐方式，这样父元素的高度会自然扩展。

.parent {
  display: flex;
}