清除浮动有四种常用方法：1. 使用clear属性添加空元素，简单但不语义化；2. 伪元素::after结合clear:both，推荐且无需额外标签；3. 父元素设置overflow:hidden或auto触发BFC，简洁但可能裁剪溢出内容；4. display:flow-root创建新BFC，现代浏览器支持，最干净方案。实际开发中伪元素法最通用，flow-root更现代，按需选择。
当使用浮动（float）布局时，父元素无法自动撑开包含的浮动子元素，容易导致后续元素错位或布局混乱。解决这个问题需要清除浮动。以下是几种常用且有效的清除浮动方法。
1. 使用 clear 属性
最基础的方法是在浮动元素之后添加一个空元素，并设置 clear: both 来阻止其两侧出现浮动元素。
示例：
HTML:
<div class="container">
<div class="box float-left">左浮动</div>
<div class="box float-right">右浮动</div>
<div class="clearfix"></div>
</div>
CSS:
.float-left { float: left; }
.float-right { float: right; }
.clearfix { clear: both; }
这种方法简单直接，但需要额外的 DOM 元素，不够语义化。
2. 使用伪元素清除浮动（推荐）
通过 ::after 伪元素在容器末尾插入内容并清除浮动，既无需添加多余标签，又能有效闭合浮动。
立即学习“前端免费学习笔记（深入）”；
常用写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将这个类应用到包含浮动元素的父容器上即可。
例如：
<div class="container clearfix">
<div class="box float-left">内容</div>
<div class="box float-right">内容</div>
</div>
3. 使用 overflow 触发 BFC
给父元素设置 overflow: hidden 或 auto 可以触发块级格式化上下文（BFC），让父容器包含内部浮动元素。
示例：.container {
overflow: hidden;
}
这种方法简洁，但要注意如果子元素有超出容器的内容（如弹出菜单），可能会被裁剪。
4. 使用 display: flow-root（现代方案）
这是目前最干净的原生方法。设置 display: flow-root 会创建一个新的块级格式化上下文，自动包含所有子元素，包括浮动元素。
用法：.container {
display: flow-root;
}
兼容性较好，适用于现代浏览器，是未来推荐做法。
基本上就这些。选择哪种方式取决于项目需求和浏览器支持情况。日常开发中，clearfix 伪元素方案 最通用，而 display: flow-root 更简洁现代。根据实际情况灵活选用即可。
