最推荐清除浮动的方案是伪元素法（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 或动画移出边界的布局 - 额外空标签法（如
）：有效但破坏语义，增加冗余 dom，仅建议临时调试或极简原型中使用 - 固定高度或父级浮动：治标不治本，无法响应内容变化，已基本淘汰
根本性规避：用 Flex 或 Grid 替代浮动
浮动本就不是为页面布局设计的，现代开发应优先考虑更合理的方案：