最稳妥方案是display: flow-root，一行创建bfc解决塌陷；clear: both加父元素无效因它只影响自身位置；clearfix必须满足content: ""、display: table、clear: both三条件。
直接用 display: flow-root，一行代码解决，不裁剪、不污染结构、无兼容性风险——这是当前最稳妥的方案。
为什么 clear: both 加在父元素上完全无效
clear 只控制「自身」位置，不参与父容器高度计算。父容器塌陷的根本原因是浮动子元素脱离文档流，父容器根本“看不见”它们。把 clear: both 写在父元素 CSS 里，浏览器会忽略它，因为父元素没浮动，这个声明没有作用对象。
常见错误写法：
.parent { clear: both; } /* 没用 */
真正起效的是让一个**参与文档流的块级元素**位于所有浮动子项之后，并让它 clear: both。这个元素必须是父容器的直接子节点，且不能被 display: none、height: 0（没配 overflow: hidden）或 flex/grid 容器压制。
display: flow-root 怎么用才真正生效
它专为包裹浮动设计，强制创建 BFC，让父容器重新包含浮动子项，且不会裁剪 box-shadow、position: absolute 子元素或溢出内容。
- 必须加在「直接包裹浮动子项」的父容器上，写在祖父层或子元素上都无效
- 如果父容器原本是
inline元素（比如<span></span>），得先设display: block或inline-block，否则flow-root不生效 - 现代浏览器全支持：
Chrome 64+、Firefox 58+、Safari 15.4+、iOS 15.4+ - 兼容性兜底可加
@supports回退：
.parent { display: flow-root; }
@supports not (display: flow-root) {
.parent { overflow: hidden; }
}
.clearfix::after 写错一个字就等于没写
伪元素清除浮动不是“写了就行”，必须同时满足三个硬条件：
-
content: ""—— 不能为空格、不能写成content: none，否则伪元素不渲染 -
display: table—— 推荐用table，比block更稳：天然触发 BFC，避免 margin collapse 导致伪元素“消失”，IE8/9 下也可靠 -
clear: both—— 缺了它，只是多了一行空内容，起不到清除作用
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：Chrome DevTools 默认不显示 ::after，要手动勾选 “Show user agent shadow DOM” 才能确认是否渲染成功；如果父容器写了 height 或 min-height，会覆盖 clearfix 带来的高度计算，导致视觉上仍像没清掉。
真正麻烦的从来不是写不对，而是加错了层级——嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 flow-root 或 clearfix；更常见的是，在 display: flex 容器里徒劳地塞 ::after，那个伪元素根本不会参与布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
