在网页布局中，浮动是一种常见的技术，可以让多个元素在同一行中显示或者在一个容器中呈现多个列。然而，由于浮动元素会脱离正常的文档流，可能导致父元素无法正确地包裹浮动元素，造成布局混乱的问题。为了解决这个问题，我们可以使用一些方法来清除浮动。下面介绍了八种常见的清除浮动的方法。
1. 使用clear属性清除浮动
.clearfix::after {
content: "";
display: table;
clear: both;
}
通过在浮动元素的父元素上添加一个伪元素，并设置其clear属性为both，可以清除浮动。这种方法适用于大多数情况。
2. 使用overflow属性清除浮动
.parent {
overflow: hidden;
}
通过设置父元素的overflow属性为hidden，可以清除浮动。这种方法简单易用，但可能会隐藏部分内容。
3. 使用clearfix类清除浮动
.clearfix::after {
content: "";
display: table;
clear: both;
}
.parent {
zoom: 1;
}
通过在浮动元素的父元素上添加一个.clearfix类，并在该类中使用清除浮动的方法来清除浮动。同时，为了兼容旧版本的IE浏览器，还需要在父元素上添加zoom属性。
4. 使用clearfix类和clearfix模块清除浮动
.clearfix::after {
content: "";
display: table;
clear: both;
}
.parent:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
通过在浮动元素的父元素上添加一个.clearfix类，并在该类中使用清除浮动的方法来清除浮动。同时，使用::after伪元素添加一个占位符，设置clear属性为both，使父元素包裹浮动元素。
5. 使用BFC（块级格式化上下文）清除浮动
.parent {
overflow: hidden;
display: flow-root;
}
通过将父元素的display属性设置为flow-root，可以创建一个BFC，从而清除浮动。这种方法简单易用，但可能会影响其他布局。
6. 使用BFC和clearfix类清除浮动
.clearfix::after {
content: "";
display: table;
clear: both;
}
.parent {
overflow: hidden;
display: flow-root;
}
通过在浮动元素的父元素上添加一个.clearfix类，并在该类中使用清除浮动的方法来清除浮动。同时，通过将父元素的display属性设置为flow-root，创建一个BFC来清除浮动。
7. 使用flexbox布局清除浮动
.parent {
display: flex;
flex-wrap: wrap;
}
通过将父元素的display属性设置为flex，可以使用flexbox布局来清除浮动。这种方法简便快捷，但可能会影响其他布局。
8. 使用网格布局清除浮动
.parent {
display: grid;
}
通过将父元素的display属性设置为grid，可以使用网格布局来清除浮动。这种方法简便快捷，但可能会影响其他布局。
以上是常见的八种清除浮动的方法，根据实际情况选择合适的方法来清除浮动，确保页面布局的正确性。希望本文对你有所帮助！
本文来自极简博客，作者：烟雨江南，转载请注明原文链接：CSS清除浮动的八种方法