浮动元素导致父容器高度塌陷，因其脱离文档流使父容器无法感知其高度；clearfix伪元素通过触发BFC并清除浮动来解决，标准写法为.clearfix::after{content:"";display:table;clear:both}。
为什么浮动元素会让父容器高度塌陷
浮动元素脱离文档流，父容器无法感知其高度，直接表现为高度变成0或远小于预期。这不是bug，是CSS规范定义的行为——浮动本意就是让文字环绕图片这类场景，自然要“浮”出去。
常见错误现象：div 包着几个 float: left 的子元素，但父 div 在开发者工具里显示高度为0，背景色、边框都看不见。
- 别指望父容器自动“包裹”浮动子元素
-
height: auto在这种情况下等于没写 - 用
display: flex或display: grid虽然能绕过问题，但会改变布局逻辑，不是“清除浮动”的等价替代
clearfix伪元素怎么写才真正生效
核心是触发BFC（块格式化上下文），同时不破坏结构语义。最稳妥的写法是给父容器加一个类，用 ::after 插入内容并设 clear: both。
标准 clearfix 写法（兼容 IE8+）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 必须有
content: ""，否则伪元素不渲染 - 用
display: table比display: block更安全——后者在某些旧版 Safari 下可能失效 - 不要只写
::after，漏掉::before一般不影响，但加了能防止顶部外边距合并（margin collapse） - IE6/7 需额外加
*zoom: 1触发 hasLayout，但现在基本可忽略
overflow: hidden 为什么能“清浮动”，又有什么代价
设置 overflow: hidden（或 auto、scroll）会让容器创建 BFC，从而包含浮动子元素。它见效快，但副作用明显。
- 内容溢出时会被裁剪，比如下拉菜单、tooltip、负 margin 拉出的装饰元素全消失
-
overflow: auto在 iOS Safari 上可能引发滚动卡顿或意外出现滚动条 - 和
transform、position: fixed元素交互时，层级和定位可能异常 - 它只是“看起来清了”，没解决根本机制，调试时容易误判布局问题来源
现代项目里该选哪个方案
如果只是临时调试或老项目维护，overflow: hidden 敲得快；但只要涉及可维护性或复杂交互，优先用 clearfix 类。
- Flex/Grid 布局已成主流，新项目中尽量用
display: flex替代浮动布局——这时根本不需要清浮动 - 用 CSS 自定义属性封装 clearfix：比如
--clear: both配合::after，便于主题切换时统一控制 - 注意：PostCSS 或 Tailwind 这类工具生成的 utility class（如
clearfix）底层仍是伪元素方案，原理没变
浮动本身没被淘汰，但它的使用场景越来越窄。真正容易被忽略的是：很多人加了 clearfix 却忘了给父容器加对应 class，或者把 class 加在了错误层级的元素上——结果还是塌陷，然后反复试 overflow，最后怀疑浏览器坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
