浮动元素导致父容器高度塌陷是因为其脱离文档流，父容器无法感知其存在；clearfix需用::after生成display:table的伪元素并clear:both；现代可用display:flow-root替代。
为什么浮动元素会让父容器高度塌陷
因为浮动元素脱离了普通文档流，父容器在计算高度时直接“看不见”它们，于是只按内部非浮动内容撑开——如果子元素全浮动，父容器高度就变成 0。
常见现象：div 包着几个 float: left 的 img 或 aside，结果背景色、边框、后续元素全部错位。
clearfix 伪元素怎么写才真正生效
核心是让父容器在视觉上“感知”到浮动子项的存在。最可靠写法是用 ::after 生成一个清除浮动的块级元素：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
-
content: ""必须有，否则伪元素不渲染 -
display: table比block更稳妥——它能触发 BFC，同时避免某些 IE 下的 margin 合并问题 - 不能只写
clear: both，没display就不会占布局空间，清除无效 - 必须加在浮动元素的**直接父容器**上，套多一层或少一层都不起作用
现代 CSS 有没有更简单的替代方案
有，但要看兼容性要求：
- 如果不需要支持 IE11 及更早版本，直接给父容器加
display: flow-root—— 它会创建新的 BFC，天然包含浮动子项，代码零冗余 -
overflow: hidden也能触发 BFC 清除浮动，但副作用明显：可能意外裁剪阴影、下拉菜单、定位元素溢出部分 - Flex 或 Grid 布局本身不依赖浮动，改用
display: flex后根本不用清浮动——但这是重构，不是“清除”
注意：display: flow-root 在 Safari 15.4+、Chrome 58+、Firefox 57+ 支持良好；若项目仍需兼容旧版 Safari 或 IE，clearfix 仍是事实标准。
容易被忽略的细节和调试技巧
实际写的时候，这几个地方最容易翻车：
- 伪元素默认是 inline，
display: table是为了让它变成块级并参与高度计算；写成display: block在部分老浏览器里可能失效 - 如果父容器本身设置了
height或min-height，clearfix不会覆盖这些显式值，得检查是否误写了固定高度 - 用 DevTools 查看元素时，
::after默认不显示在 Elements 面板里，要勾选 “Show user agent shadow DOM” 才能看到（Chrome）或在 Styles 面板里手动展开伪元素样式 - 多个浮动层嵌套时，只在外层父容器加
clearfix不够，每级需要包裹浮动子项的容器都得单独处理
浮动没消失、高度还是 0？先确认 class 名拼写、是否漏了 ::after 的冒号、以及父元素有没有被其他 CSS（比如 transform）意外触发了新的层叠上下文导致伪元素失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
