最推荐清除浮动的方案是伪元素法（clearfix），配合display: flow-root等现代BFC触发方式；伪元素法结构干净、兼容性好，而flow-root语义清晰、无副作用，Flex/Grid则可根本规避浮动问题。
清除浮动最推荐的方案是使用伪元素法（clearfix），配合现代 BFC 触发方式作为补充或替代。它结构干净、兼容性好、无需额外 HTML 标签，是目前最稳妥的通用解法。
首选：伪元素清除法（clearfix）
给浮动容器添加 .clearfix 类，通过 ::after 伪元素插入不可见块并清除浮动：
- 核心代码简洁可靠：
.clearfix::after { content: ""; display: block; clear: both; } - 建议加上
height: 0; visibility: hidden;避免意外占位 - 如需兼容 IE8，可追加
*zoom: 1;触发 hasLayout - 不污染 HTML 结构，可全局复用，适合维护型项目
更现代的替代：display: flow-root
直接让父容器成为 BFC 根节点，天然包含内部浮动，无需清除逻辑：
- 一行 CSS 即可：
display: flow-root; - 语义清晰、无副作用，不依赖伪元素或内容插入
- 兼容 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+（基本覆盖所有现代浏览器）
- 适用于新项目或已支持主流浏览器的场景，比
overflow: hidden更安全（不会意外裁剪溢出内容）
慎用但仍有价值的方案
某些老项目或特殊限制下仍会用到以下方法，需注意局限性：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden / auto：能触发 BFC，但可能隐藏意外溢出的内容，不适合有下拉菜单、tooltip 或动画移出边界的布局 - 额外空标签法（如
<div style="clear:both"></div>）：有效但破坏语义，增加冗余 DOM，仅建议临时调试或极简原型中使用 - 固定高度或父级浮动：治标不治本，无法响应内容变化，已基本淘汰
根本性规避：用 Flex 或 Grid 替代浮动
浮动本就不是为页面布局设计的，现代开发应优先考虑更合理的方案：
-
display: flex;可轻松实现横向排列、对齐、换行，无需float -
display: grid;适合二维布局，结构明确，完全绕开浮动问题 - 两者均原生支持响应式、自动伸缩和对齐控制，维护成本更低
