浮动使父元素高度塌陷是因为浮动元素脱离文档流，父容器无法感知其存在；clearfix通过伪元素触发BFC并清除浮动；现代替代方案有overflow:hidden、display:flow-root、flex或grid布局。
为什么浮动会让父元素高度塌陷
因为浮动元素脱离了普通文档流，父容器在计算高度时“看不见”它们，自然就按内部非浮动内容撑开——如果子元素全浮动，父元素就剩一个空壳，高度为零。
这不是 bug，是 CSS 规范定义的行为。关键在于：父容器需要触发 BFC（块级格式化上下文） 或者主动“感知”浮动子元素的存在。
clearfix 是什么，它怎么起作用
clearfix 是一套通过伪元素插入清除浮动的 CSS 技巧，本质是在父容器末尾插入一个看不见但能清浮动的 ::after 元素。
最常用写法（兼容 IE8+）：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 hack，触发 hasLayout */
}注意：display: table 触发 BFC，clear: both 确保它落在所有浮动元素下方，从而把父容器底部“拉下来”。
- 不用
display: block+clear，否则无法撑高（块级元素不清浮动也能被浮动覆盖） -
content: ""必须存在，否则伪元素不渲染 - 现代项目可省略
*zoom: 1，但若需支持旧版 IE 就得留着
除了 clearfix，还有哪些更现代的替代方案
如果你控制得了 HTML 结构或浏览器环境，这些方式更轻量、语义更清晰：
- 给父容器设置
overflow: hidden或overflow: auto（触发 BFC，但可能意外截断阴影或下拉菜单） - 用
display: flow-root（Chrome 58+/Firefox 57+ 支持），专为此场景设计，无副作用，推荐优先尝试 - Flex 布局：父元素设
display: flex，子元素自动参与排列，浮动失效（此时浮动属性被忽略） - Grid 布局同理：父元素设
display: grid，浮动同样不生效
注意：float 和 flex/grid 本就不该混用——一旦用了后者，float 就失去意义，强行保留反而增加维护成本。
容易被忽略的细节和调试建议
即使加了 clearfix，父容器仍没高度？先检查这几个点：
- 类名有没有正确加到父容器上（不是子元素，也不是拼错成
clear-fix） - CSS 是否被其他规则覆盖（比如
height: 0或min-height: 0） - 子元素是否用了
position: absolute或display: none，它们同样脱离文档流，clearfix无效 - 开发者工具里看
::after伪元素是否存在、是否被display: none或visibility: hidden干掉
真正棘手的情况往往是多个脱离文档流的方式叠加（比如浮动 + 绝对定位 + transform），这时候靠 clearfix 已经不够，得回归布局模型本身去重构。
