1. 清除浮动方法
当子元素浮动时，父元素的高度会丧失，导致父元素无法自适应子元素的高度。为了解决这个问题，我们可以使用以下几种清除浮动的方法：
1.1 使用clearfix类
clearfix是一种常用的清除浮动方法，通过给父元素添加clearfix类来清除浮动。这样可以确保父元素包含子元素的高度。在CSS中添加如下代码：
.clearfix::after {
content: "";
display: table;
clear: both;
}
在父元素的类中加入clearfix类即可：
<div class="parent clearfix">
...
</div>
这样，父元素的高度将被正确地计算，并且可以正确包含浮动的子元素。
1.2 设置overflow属性
另一种常用的清除浮动方法是设置父元素的overflow属性为auto或hidden。例如，将父元素的overflow属性设置为hidden：
.parent {
overflow: hidden;
}
通过设置overflow属性，父元素将被强制包含浮动的子元素，从而解决高度坍塌的问题。
1.3 使用伪元素
我们还可以使用伪元素来清除浮动。在CSS中添加如下代码：
.parent::after {
content: "";
display: block;
clear: both;
}
这样，在父元素后面生成一个伪元素，它具有clear:both属性，可以清除浮动。将这个伪元素添加到父元素中：
<div class="parent">
...
<div class="child"></div>
...
<div class="child"></div>
<div class="clearfix"></div>
</div>
这样，父元素的高度将正确地计算，并且可以包含浮动的子元素。
2. 覆盖浮动方法
除了清除浮动，我们还可以使用一些方法覆盖浮动，使父元素能够正确地包含浮动的子元素。
2.1 使用float属性
一个简单的方法是给父元素添加float属性。这样，父元素也会变成浮动的元素，从而包含子元素的高度。在CSS中添加如下代码：
.parent {
float: left;
}
.child {
float: left;
}
通过将父元素和子元素都设为浮动，可以避免父元素高度坍塌的问题。
2.2 使用flex布局
使用flex布局是另一种覆盖浮动的方法。通过将父元素的display属性设置为flex，可以轻松地实现自适应子元素的高度。在CSS中添加如下代码：
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
float: left;
}
通过将父元素设为flex布局，父元素可以自动扩展以包含浮动的子元素。
3. 使用clear属性
使用clear属性是一种常用的清除浮动的方法。通过给父元素添加clear属性，可以清除浮动并确保父元素正常包含子元素。在CSS中添加如下代码：
.parent::after {
content: "";
display: block;
clear: both;
}
然后将这个伪元素添加到父元素的样式中：
<div class="parent">
...
<div class="child"></div>
...
<div class="child"></div>
<div style="clear: both;"></div>
</div>
这样，父元素的高度将被正确地计算，并且可以包含浮动的子元素。
总结
通过上述几种方法，我们可以解决浮动导致父元素高度坍塌的问题。通过清除浮动或覆盖浮动的方法，父元素可以正确地包含浮动的子元素，并且高度可以自适应子元素的内容。使用清除浮动的方法可以通过添加clearfix类、设置overflow属性或使用伪元素来实现。使用覆盖浮动的方法可以将父元素和子元素都设为浮动，或者使用flex布局。此外，还可以使用clear属性来清除浮动。
无论使用哪种方法，清除浮动都是为了解决父元素高度坍塌的问题，确保父元素正确包含子元素。根据具体的布局需求和浏览器兼容性，选择合适的方法来清除浮动是非常重要的。