父容器高度塌陷是浮动的必然结果，因浮动元素脱离文档流致父容器无法感知其高度；clearfix通过伪元素或zoom触发bfc来修复，但应优先考虑flex/grid等现代布局。
为什么父容器高度塌陷是浮动的必然结果
浮动元素会脱离文档流，父容器在计算高度时直接“看不见”它们，导致高度收缩为0。这不是bug，是CSS规范定义的行为——float本就设计为文字环绕式布局，不是为了构建块级结构。
常见错误现象：div里放了几个float: left的子元素，但父div在开发者工具里显示高度为0，背景色/边框全没了；或者后续兄弟元素向上“掉进”了这个塌陷区域。
使用场景：老项目兼容IE8+、需要纯CSS无JS方案、或嵌套在无法修改HTML结构的第三方容器中。
Clearfix的两种主流写法及兼容性取舍
现代方案（伪元素+::after）更干净，但IE8不支持双冒号语法；传统方案（zoom: 1 + clear: both）靠触发hasLayout，在IE6–IE7必须存在，但对现代浏览器冗余。
立即学习“前端免费学习笔记（深入）”；
推荐组合写法（兼顾IE8+与现代浏览器）：
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
要点说明：
-
*zoom: 1是IE6–IE7私有hack，仅触发hasLayout，不影响其他浏览器 -
::after必须用双冒号（现代标准），单冒号:after在部分旧版Safari中行为不稳定 -
display: table比display: block更可靠——后者在某些IE版本中可能不清除浮动 - 不要用
height: 0或font-size: 0隐藏伪元素，可能引发行高计算异常
什么时候不该用Clearfix
Clearfix本质是“打补丁”，它解决的是浮动带来的副作用，而不是替代合理布局逻辑。以下情况强行加clearfix反而埋坑：
- 容器内只有单个浮动子元素——直接给父容器设
overflow: hidden更轻量（但注意会裁剪position: absolute溢出内容） - 已用
flex或grid布局——浮动本身就不该出现，加clearfix毫无意义且可能干扰轴线对齐 - 子元素用
display: inline-block模拟浮动效果——此时应改用vertical-align或flex，而非硬套Clearfix - 响应式断点中动态切换浮动状态——不同媒体查询下Clearfix可能失效，需同步重置伪元素
清除浮动后仍高度异常的排查点
加了Clearfix却还是塌陷？大概率不是Clearfix没生效，而是其他样式在干扰：
- 子元素设置了
margin-bottom，但父容器没触发BFC——外边距合并导致视觉上“没撑开”，试试overflow: hidden或padding: 0.1px - 浮动元素本身有
vertical-align: baseline（如图片默认值），和行框对齐产生空隙，用vertical-align: top或display: block修复 - 伪元素被其他CSS重置了，比如全局设置了
*::after { display: none }，会直接干掉Clearfix - 父容器用了
transform、filter等属性——它们会创建新的层叠上下文，有时影响浮动清除的渲染顺序
真正麻烦的从来不是怎么加Clearfix，而是判断“这里到底该不该用浮动”。很多所谓“清除失败”，其实是布局模型选错了。
