浮动导致父容器高度塌陷是因为浮动元素脱离文档流，父容器无法感知其高度；clearfix通过伪元素插入并清除浮动来修复，现代应优先使用Flexbox或Grid布局。
为什么浮动会让父容器高度塌陷
浮动元素会脱离文档流，父容器在计算高度时直接“看不见”它们，导致高度收缩到内容最小值——哪怕子元素明明撑开了视觉区域。这不是bug，是CSS规范里明确的行为。
常见错误现象：div 包着几个 float: left 的 div，结果父 div 在开发者工具里显示高度为 0 或极小值，背景色、边框、margin-bottom 全部失效。
使用场景：老项目维护、需要兼容 IE8+ 的布局、或者用浮动做多栏布局（比如文章侧边栏）时最常遇到。
clearfix 是怎么强制“看到”浮动子元素的
核心思路是：在父容器末尾插入一个“看不见但有分量”的内容，让它参与高度计算，并且清除它前面所有浮动的影响。不是靠隐藏 overflow，也不是靠加空标签，而是用伪元素 + 清除浮动的组合拳。
标准 clearfix 写法（推荐）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点说明：
-
content: ""是必须的，否则伪元素不渲染 -
display: table比block更稳妥——它能触发 BFC，同时避免 IE6/7 下的 margin 双倍问题 -
clear: both确保该伪元素一定出现在所有浮动元素下方，把父容器底部“拉下来”
IE6/7 下为什么还要加 zoom: 1
IE6/7 不支持 ::after 伪元素，但它们识别 zoom: 1 触发 hasLayout，让父容器重新计算尺寸。这不是 hack，是当时唯一可靠的兜底方式。
完整兼容写法：
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：*zoom: 1 是 IE6/7 专属，现代浏览器忽略；::after 在 IE8+ 生效。如果项目已放弃 IE7 及以下，这行可以删掉。
容易踩的坑：
- 只写
clear: both在父容器自身上——没用，它得作用在浮动元素之后的新块上 - 用
overflow: hidden代替 clearfix——虽然能撑高，但会意外裁剪position: absolute子元素或阴影 - 给伪元素设
height: 0或visibility: hidden——可能在某些旧版浏览器中导致清除失效
现代开发中还该优先用 clearfix 吗
不该。Flexbox 和 Grid 已成为主流布局方案，它们天然不产生浮动塌陷问题。但你仍会在 legacy CSS、第三方组件、或 CMS 生成的 HTML 中撞见浮动和 clearfix。
所以真正要记住的是：
- 遇到塌陷，先确认是不是真用了
float——有时候是误解了定位行为 - 用 clearfix 时，坚持带
::after+display: table+clear: both这个最小可靠组合 - 别为了“语义化”给每个容器都加
class="clearfix"，只加在确实包含浮动子元素的父容器上
最易被忽略的一点：clearfix 解决的是高度计算问题，它不改变浮动元素本身的定位逻辑——该重叠还是重叠，该遮挡还是遮挡。想彻底摆脱这些麻烦，得从布局模型本身换道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
