::after伪元素法是目前最通用、无侵入、不加标签的清除浮动方案，通过在父容器末尾虚拟插入块级元素并设置clear:both和content:""来触发BFC，display:table比block更稳妥；display:flow-root是现代并行选择，兼容主流浏览器且无副作用，但不适用于父元素自身浮动的场景。
直接用 ::after 伪元素配合 clear: both，这是目前最通用、无侵入、不加标签的方案。
为什么 ::after 伪元素法能“优雅”清除浮动
它在父容器末尾“虚拟插入”一个块级元素，触发清除行为，不污染 HTML 结构，也不影响语义。关键在于：这个伪元素必须是块级（display: block 或 table），且明确设置 clear: both，才能打断浮动流对后续布局的影响。
-
content: ""是必需的，否则伪元素不渲染 - 用
display: table比block更稳妥——它天然具有 BFC 特性，能确保父容器正确包裹浮动子项，避免某些老浏览器下高度塌陷残留 - 不需要
zoom: 1或*+html等 IE6/7 兼容 hack，2026 年绝大多数项目已无需支持这些版本
display: flow-root 是更现代的替代方案吗
是，但它不是“替代”，而是“并行选择”。display: flow-root 直接让父容器创建新的 BFC，天然包含所有浮动子元素，代码更少、意图更清晰。
- 兼容性：Chrome 64+/Firefox 59+/Safari 15.4+/Edge 79+ 均支持；如需支持 Safari 15.3 及更早，仍得回退到伪元素法
- 副作用为零：不会像
overflow: hidden那样意外裁剪position: absolute子元素或弹出菜单 - 不能和
float同时作用于同一元素（float会失效），所以仅适用于父容器本身不浮动的场景
哪些写法看似简洁但容易踩坑
常见错误不是“写不对”，而是“没想全上下文”。比如：
立即学习“前端免费学习笔记（深入）”；
- 只写
.clearfix::after { clear: both; }—— 缺少display和content，伪元素不生效 - 用
overflow: auto代替清除：虽能撑开高度，但滚动条可能意外出现，且溢出内容（如 tooltip）会被裁剪 - 给父元素设
height或min-height：属于硬编码，响应式布局中极易断裂，仅限极简 demo 或固定高度模块 - 在 Flex/Grid 容器里还费力清除浮动：完全没必要——它们天然不产生文档流脱离，浮动会自动退化为 inline 行为
真正需要关注的，是浮动是否还在你当前项目中承担布局职责。如果只是图文环绕，float 依然合理；如果还在用它做多栏布局，那清除浮动只是治标——该换 display: flex 或 grid 了。
