display: flow-root是解决浮动塌陷的最优解，一行代码触发BFC，使父容器自然包含浮动子元素，不裁剪溢出内容、不干扰布局、现代浏览器全面支持。
直接用 display: flow-root，一行解决，不用写伪元素、不担心兼容性、不裁剪下拉菜单或阴影——2026 年绝大多数项目已可放心采用。
为什么 clear: both 加在父元素上完全无效
因为 clear 只作用于「自身」，不是子元素。给父容器写 .parent { clear: both; }，它只会尝试避开前面的浮动兄弟元素，对内部浮动子项毫无影响。父容器依然“看不见”子元素，高度还是 0。
真正起效的清除动作，必须出现在浮动元素之后、且仍在同一父容器内的块级元素上。伪元素 ::after 能模拟这个位置，但前提是它得渲染出来：
-
content: ""必须显式写，否则伪元素不生成 -
display得设为table或block，行内级伪元素无视clear: both - 如果父容器本身有
overflow: hidden，可能干扰伪元素的清除行为，导致失效
display: flow-root 是什么，为什么它更可靠
display: flow-root 是 W3C 明确定义的 BFC（块级格式化上下文）触发方式，专为解决这类问题而生。它让父容器重新包含所有浮动子项，背景、边框、后续元素全部恢复正常，且不改变子元素排布逻辑。
立即学习“前端免费学习笔记（深入）”；
优势很实在：
- 语义清晰：明确表达“我要建立一个独立的布局上下文”
- 零副作用：不裁剪
box-shadow、transform、下拉菜单等溢出内容 - 兼容现代浏览器：Chrome 64+ / Firefox 58+ / Safari 15.4+ 均已原生支持
- 无需额外样式或 DOM 节点，也不依赖
content或zoom
写法就一行：.container { display: flow-root; }
哪些情况还必须用 clearfix
仅限两类真实约束场景：
- 需要兼容 IE11 或更老浏览器（
flow-root在 IE 中完全不支持） - 对接无法修改的第三方 HTML（比如 CMS 输出固定结构，你只能加 class）
此时标准写法必须同时满足三项：
-
content: ""—— 漏掉就等于没写 -
display: table—— 比block更稳妥，兼容 IE8+，避免 margin 双倍问题 -
clear: both—— 核心动作，强制伪元素下移到浮动元素下方
别忘了嵌套浮动结构：每一级「直接包裹浮动子项」的容器都得单独加 .clearfix，外层加了不代表内层自动生效。
真正容易被忽略的，是那个你加了 float: left 却忘了处理父容器的 div——它就在那儿，静静塌陷着；还有你在 display: flex 容器里徒劳地塞 ::after，那个伪元素根本不会参与布局。
