优先用 display: flow-root，一行触发BFC且无副作用；clear: both 加父元素无效，因它只避开前序浮动兄弟，不作用于子元素；伪元素清除需 content、display、clear 三者齐全。
直接用 display: flow-root，现代项目里一行就能解决，不用 hack、不裁内容、不污染 HTML。
为什么 clear: both 加在父元素上完全没用
clear 的作用对象是「自己」，不是子元素。给父容器写 .parent { clear: both; }，它只尝试避开前面的浮动兄弟元素，对内部浮动子项毫无影响——父容器依然看不见子项，高度还是 0。
- 真正起效的
clear: both必须出现在浮动元素之后、且仍在同一父容器内的块级兄弟元素上 - 常见错误：把
<div style="clear:both"></div>放到父容器外面，或漏掉 - 伪元素
::after能模拟这个“之后的兄弟”，但必须满足三个条件：content: ""、display: table（或block）、clear: both，缺一不可
display: flow-root 是什么，为什么推荐它
它是 W3C 明确定义的 BFC 触发方式，专为解决浮动塌陷而生，语义清晰、零副作用。
- 只需一行：
.container { display: flow-root; }，父容器立刻重新包含所有浮动子项 - 不裁剪任何溢出内容（
position: absolute弹层、box-shadow、下拉菜单全保留） - 不改变子元素排布逻辑（不像
flex或grid那样强制重置子项样式） - Chrome 64+ / Firefox 58+ / Safari 15.4+ 均已原生支持，2026 年可放心使用
哪些情况还得退回 overflow: hidden 或 clearfix
仅限两类真实约束场景：
立即学习“前端免费学习笔记（深入）”；
- 需要兼容 IE11 及更老浏览器（
flow-root不支持） - 对接无法修改的第三方 HTML（比如 CMS 输出的固定结构，连 class 都不能加）
此时优先选 overflow: hidden 而非 clearfix：少一行 CSS、少一个渲染节点、避免伪元素干扰可访问性；若必须用 clearfix，务必写全 content: ""、display: table、clear: both，否则无效。
容易被忽略的是：如果父容器本身已是 display: flex 或 display: grid，子元素的 float 属性会直接失效——它自动退化为普通块级元素，不再脱离文档流，高度塌陷问题根本不会出现。此时加 clearfix 不仅无效，还会干扰调试。
