clear: both 不能单独加在父元素上解决高度塌陷，必须作用于伪元素（如::after）且该伪元素需为块级、含content: ""并置于浮动子元素之后。
直接说结论：clear: both 不能单独加在父元素上解决高度塌陷——它必须作用于一个块级元素（比如伪元素），且该元素得出现在所有浮动子元素之后。
为什么clear: both加在父元素上没用
很多人试过给父容器写 clear: both，发现完全无效。这是因为：clear 的作用对象是“自身”，不是子元素；它只控制当前元素**不被前面的浮动元素影响位置**，对父容器如何计算高度毫无关系。父元素本身没浮动，clear 对它就是个无意义声明。
- 父元素没浮动 →
clear属性被忽略（CSS 规范明确定义） - 即使父元素也浮动了，
clear: both只让它避开上方浮动，仍不会让它“感知”自己内部的浮动子项 - DevTools 里看到父元素样式栏有
clear: both，不代表它起了作用
clear: both 正确用法：必须配合伪元素和 content: ""
真正起效的组合是：::after 伪元素 + content: "" + 块级显示 + clear: both。缺一不可。
-
content: ""是前提：没有内容，伪元素根本不渲染，后续样式全失效 - 必须设
display: table或display: block：只有块级元素才支持clear，inline不行 -
clear: both要写在伪元素上，不是父元素本身 - 推荐用
display: table：比block更稳，避免 margin 合并干扰高度计算
示例代码：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
常见失效场景和排查点
就算代码抄对了，clear: both 也可能不生效——问题往往不在语法，而在上下文。
- 类名没加到**浮动子元素的直接父容器**上（比如加到了外层 wrapper，而实际浮动发生在 inner div）
- 父容器设置了
height: 0、min-height: 0或overflow: hidden覆盖了伪元素效果 - 其他 CSS 把伪元素干掉了：
display: none、visibility: hidden、opacity: 0 - 子元素用了
position: absolute或display: none：它们同样脱离文档流，clearfix对它们无效
现代项目里，别硬套 clear: both 了
如果你还在用 float 做布局（比如多栏、导航），clearfix 是补救手段，不是设计逻辑。真正省心的做法是换掉 float：
- 父容器加
display: flow-root：一行解决，不裁剪溢出，不依赖伪元素，Chrome 58+ / Firefox 57+ / Safari 10.1+ 都支持 - 改用
display: flex或display: grid：浮动在 flex/grid 容器中自动失效，父高度天然撑开 - 混用
float和flex是反模式：行为不可控，调试时容易误判根源
真正容易被忽略的是：clear: both 解决的只是表象，而浮动布局本身在响应式、缩放、可访问性上已全面落后。补得越勤，重构成本越高。
