1. 使用clear属性清除浮动
我们可以通过给浮动元素的后面添加一个空的块级元素并且设置clear属性来清除浮动。clear属性有四个值可选：none、left、right和both。none是默认值，不清除浮动，left表示左边不允许浮动元素，right表示右边不允许浮动元素，both表示两边都不允许浮动元素。
下面是一个例子：
.clearfix::after {
content: "";
display: table;
clear: both;
}
在上面的例子中，我们使用了伪元素::after来创建一个空的块级元素，并设置clear属性为both，这样就清除了前面的浮动元素。
clear属性可以在需要清除浮动的地方添加额外的样式，可以用于解决浮动元素导致的父元素高度塌陷的问题。
2. 使用overflow属性清除浮动
另一种常用的方法是使用overflow属性来清除浮动。当将overflow属性设置为auto、hidden或scroll时，浮动元素会被包含在父元素中，从而清除浮动。
下面是一个例子：
.container {
overflow: hidden;
}
在上面的例子中，我们将overflow属性设置为hidden，这样浮动元素就会被包含在.container元素中，从而清除了浮动。
使用overflow属性清除浮动的优势是不需要添加额外的元素，但可能会隐藏部分内容，因此需要注意元素的布局。
3. 使用clearfix类清除浮动
另一种常见的方法是使用clearfix类来清除浮动。clearfix类是一种常用的CSS类，它通过添加伪元素来清除浮动。
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
在上面的例子中，我们给需要清除浮动的元素添加clearfix类，并使用伪元素::after来清除浮动。
同时，我们使用了zoom属性来触发IE浏览器的hasLayout属性，以解决IE浏览器中伪元素::after不生效的问题。
clearfix类是一种常用的清除浮动方法，经过多年的使用和验证，具有较好的兼容性和稳定性。
总结
浮动是CSS布局中常用的一种特性，但它也会导致一些问题，如父元素高度塌陷等。为了解决这些问题，我们可以使用清除浮动的方法，包括使用clear属性清除浮动，使用overflow属性清除浮动，以及使用clearfix类清除浮动。
这三种方法都有各自的优势和适用场景，具体使用哪种方法取决于具体的需求和实际情况。
通过本文的介绍，希望能帮助大家更好地理解和使用清除浮动的方法，从而避免由浮动元素导致的布局问题。