清除浮动有四种常用方法：1. 使用clear属性添加空元素，简单但不语义化；2. 触发BFC，推荐display: flow-root，无需额外标签；3. 伪元素clearfix法，兼容性好且无DOM冗余；4. 采用flex或grid布局替代float，从根本上避免问题。现代开发首选display: flow-root或flex/grid布局。
在CSS布局中，float曾是实现多栏布局的主要方式，但浮动元素会导致父容器塌陷，影响后续元素的排版。因此，“清除浮动”成为关键问题。以下是几种常见且实用的清除浮动技巧。
1. 使用clear属性
最直接的方式是在浮动元素之后添加一个空元素，并设置clear: both来阻止元素两侧出现浮动内容。
示例：<div class="box" style="float: left;">左浮动</div> <div class="box" style="float: right;">右浮动</div> <div style="clear: both;"></div>
这种方法简单有效，但需要额外的DOM元素，不够语义化。
2. BFC（块级格式化上下文）触发
通过创建BFC来包含内部的浮动元素，防止父容器塌陷。以下方式可触发BFC：
- overflow 设置为 hidden 或 auto
- display 设置为 flow-root（现代推荐）
- float 不为 none
- position 为 absolute 或 fixed
- flex 或 grid 容器
.container {
display: flow-root;
}
这种方式无需额外标签，语义清晰，是现代清除浮动的首选方法。
3. 伪元素清除法（clearfix）
通过 ::after 伪元素插入内容并应用 clear，既不增加DOM节点，又能兼容老浏览器。
.clearfix::after {
content: "";
display: block;
clear: both;
}
给需要清除浮动的父元素添加 clearfix 类即可。这是传统项目中最广泛使用的方法。
4. Flex或Grid布局替代Float
现代开发中，建议用更强大的布局方式替代浮动：
- 使用 display: flex 实现弹性布局
- 使用 display: grid 实现网格布局
这些方式天然不产生浮动问题，结构更清晰，维护更方便。
基本上就这些。虽然float逐渐被新布局取代，但在维护旧项目时，掌握清除浮动的技巧依然重要。推荐优先使用 display: flow-root 或 flex/grid 布局，避免陷入浮动陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
