clear: both 不能修复父容器塌陷，它只作用于当前元素与浮动兄弟元素的关系；真正有效的是 clearfix::after 或 display: flow-root。
clear: both 写在父元素上无效，写在子元素上只影响自身位置——它根本不是为“修复父容器塌陷”设计的。
clear: both 作用对象是兄弟元素，不是祖先
很多人把 clear: both 当成“清除浮动”的万能开关，但它的实际行为非常具体：它只让**当前元素**下移到**前面所有浮动兄弟元素的下方**。如果把它加在父元素上，父元素没有浮动兄弟，clear 就完全不触发；如果加在最后一个浮动子元素上，它只是把自己往下挪了一行，父容器依然“看不见”其他浮动子元素的高度。
- 父元素写
clear: both→ 无兄弟浮动元素可参考，规则不生效 - 浮动子元素写
clear: both→ 只影响自己位置，父容器高度仍为 0 - 真正需要的是让父容器“重新感知浮动子项”，不是给某个元素加
clear
父元素加 clearfix::after 为什么能生效？
因为 .clearfix::after 不是靠 clear “清掉”什么，而是用伪元素在父容器末尾插入一个**参与文档流的块级元素**，再让它 clear: both，从而强制父容器延伸到底部——这个新元素有真实高度（哪怕为 0），且 display 是 block 或 table，能撑开父容器。
- 必须写
content: ""，否则伪元素不生成，整个逻辑跳过 -
display: table比display: block更稳：天然触发 BFC，且避免 IE/旧 Safari 中 height: 0 失效 - 如果父元素已有
overflow: hidden，再加::after可能被裁剪，导致撑不开高度
现代项目里最该警惕的“伪清除”写法
这些写法看起来像在清除浮动，实则毫无作用，还容易掩盖问题：
- 给父元素设
float: left—— 它确实能撑高，但会让父元素也脱离文档流，后续布局全乱 - 给父元素设
display: inline-block—— 在某些字体或 line-height 下会因基线对齐产生意外空白，高度计算不可靠 - 复制网上的
.clearfix却漏了content: ""或用了content: none—— DevTools 里根本看不到 ::after 节点 - 在
display: flex或display: grid的父容器上硬套 clearfix —— float 在这些上下文中已退化，伪元素反而可能引入 margin 折叠异常
display: flow-root 是唯一真正“对口”的解法
它不模拟、不 hack，就是让父容器原生创建一个 BFC，直接包含所有浮动子项。但它有个硬限制：只对当前容器生效，嵌套浮动结构必须逐层加 display: flow-root，不能靠外层一次解决。
- Safari 15.3 及更早版本存在渲染 bug，缩放或特定 font-size 下可能失效
- IE 完全不识别，静默退化为
display: block，父容器立刻塌陷 - 如果父元素同时有
transform或filter，某些 Chrome 版本中 flow-root 的 BFC 可能被覆盖，需额外验证
真正难的不是选哪个方案，而是判断“这里到底要不要清除浮动”——很多所谓“塌陷”，其实是子元素用了 position: absolute 或父容器本身被 height/max-height 锁死了高度，这时候加任何清除都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
