display: flow-root是首选解法，一行代码触发BFC无副作用；clear: both加在父元素上无效，因它只影响自身位置而非子元素，真正生效需在浮动子项后插入块级元素（如伪元素::after），且必须含content: ""、display: table、clear: both三者。
直接用 display: flow-root，现代浏览器一行解决，无副作用；只有需兼容 IE11 或对接不可改的 CMS 输出时，才退回到 .clearfix::after 伪元素方案。
为什么 clear: both 加在父元素上完全没用
它只对“自身在文档流中的位置”起作用，不是用来“清理子元素”的。给父容器写 .parent { clear: both; }，等于让它自己去避开一个根本不存在的“前一个浮动兄弟”，浏览器直接忽略。真正起效的清除，必须出现在浮动子项之后、且仍在同一父容器内的块级元素上——::after 伪元素正是靠模拟这个位置才生效。
display: flow-root 是什么，为什么推荐它
这是 W3C 明确定义的 BFC 触发方式，专为解决浮动塌陷而生，语义清晰、零副作用：
- 只需一行：
.container { display: flow-root; } - 父容器立刻重新包含所有浮动子项，背景、边框、后续元素全部恢复正常
- 不裁剪
box-shadow、position: absolute弹层、下拉菜单等溢出内容 - 不改变子元素排布逻辑（不像
flex或grid那样重置子项样式） - Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+ 全支持；2026 年绝大多数项目可直接使用
- 注意：
flow-root对已设display: flex或display: grid的父容器无效——它们本身已是独立格式化上下文，且会忽略子元素的float
.clearfix::after 必须写全的三个条件
漏掉任意一项，伪元素就无法撑开父高，尤其在旧版 QQ 浏览器或 UC 内核中容易失效：
立即学习“前端免费学习笔记（深入）”；
-
content: ""：空字符串不能省略，也不能写成none或留空；没有 content，伪元素根本不渲染 -
display: table：比block更稳妥，能避免 IE6/7 margin 双倍问题，且天然触发 BFC 边界 -
clear: both：强制该伪元素下移到所有浮动元素下方，从而把父容器底部“拉下来” - 嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加
.clearfix，外层加了不代表内层自动生效 - IE6/7 兼容需额外补
.clearfix { zoom: 1; }，但仅限真要支持这些版本的项目
真正要留意的，是那个你加了 float: left 却忘了处理父容器的 div——它就在那儿，静静塌陷着。而 flow-root 和 clearfix 的区别，不在于谁“更高级”，而在于你是否清楚自己正在面对的是一个需要兼容老环境的遗留系统，还是一个可以干净向前走的新项目。
