clear: both 加在父元素上无效，因其作用对象是自身而非子元素；真正起效需加在浮动元素后的同级块元素上，或用伪元素::after模拟并确保content: ""、display: table、clear: both三者齐全。
为什么给父元素加 clear: both 没用
因为 clear 作用对象是「自身」，不是子元素。写 .parent { clear: both; } 只会让这个父元素避开前面的浮动兄弟元素，对内部的浮动子项完全无感知——它依然看不见子项，高度还是 0。
真正起效的清除必须出现在浮动元素之后、且仍在同一父容器内的块级元素上，比如：<div class="float-left"></div><div style="clear:both"></div>。但这种写法要改 HTML，不干净。
-
clear: both必须加在浮动元素的「下一个兄弟元素」上，不能加在父元素自己身上 - 伪元素
::after能模拟这个“下一个兄弟”，但前提是它得渲染出来：漏掉content: ""是最常见错误 -
display必须设为table或block，否则伪元素是行内级，clear: both对它无效
clearfix 的最小可用写法和关键细节
经典 .clearfix::after 写法不是可选的，三项缺一不可：
.clearfix::after {
content: "";
display: table;
clear: both;
}
其中 display: table 比 block 更稳妥：避免旧版 IE 的 margin 双倍问题，且天然触发 BFC 边界；content: "" 缺失 → 伪元素不渲染 → 清除彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 必须作用于浮动元素的「直接父容器」，外层加了不代表内层自动生效
- IE6–7 需额外补
*zoom: 1（仅当真要支持时才加） - 如果父容器已设
height或min-height，会覆盖clearfix带来的高度计算，先检查这些显式值 - Chrome DevTools 默认不显示
::after，要手动勾选 “Show user agent shadow DOM” 才能看到是否渲染成功
现代项目首选：display: flow-root
一行代码解决，无伪元素、无 hack、无副作用：.container { display: flow-root; }。它是 W3C 明确定义的 BFC 触发方式，专为这类问题而生。
- 兼容 Chrome 64+ / Firefox 58+ / Safari 15.4+，2026 年已可放心使用
- 不裁剪任何溢出内容（
box-shadow、position: absolute弹层、下拉菜单全保留） - 不改变子元素排布逻辑（不像
flex或grid那样强制重置子项样式） - 如果父容器已是
display: flex或display: grid，子元素的float属性会直接失效——此时加clearfix不仅无效，还会干扰调试
哪些情况还得用 clearfix？
仅限两类真实约束场景：
- 需要兼容 IE11 及更老浏览器（
flow-root不支持） - 对接无法修改的第三方 HTML（比如 CMS 输出的固定结构，你只能加 class）
别忘了真正的问题源头：还在用 float 做布局吗？如果只是为图文环绕或简单左/右对齐，display: inline-block、text-align 或 flex 往往更可控。而 clearfix 或 flow-root，只是对遗留 float 的兜底补救——它修的是高度，不是设计逻辑。
