浮动导致父容器高度塌陷是因为浮动元素脱离普通文档流，父容器无法感知其存在，从而按空内容计算高度为0；这是CSS规范定义的行为，非bug。
为什么浮动会让父容器高度塌陷
因为浮动元素脱离了普通文档流，父容器在计算高度时直接“看不见”它们，结果就按内部非浮动内容（比如空的文本节点）来撑高——常常变成 0px。这不是 bug，是 CSS 规范里明确定义的行为。
常见现象：div 包着几个 float: left 的子项，但父 div 在开发者工具里显示高度为 0，背景色/边框都看不见；后续兄弟元素直接往上叠。
- 只靠
overflow: hidden能临时解决，但会意外裁剪position: absolute子元素或box-shadow -
clear: both放在末尾额外标签里也行，但污染 HTML 结构，语义不清 - Flex 或 Grid 布局天然不塌陷，但老项目改起来成本高，不能当万能解
clearfix 伪元素怎么写才真正生效
核心是触发 BFC（块级格式化上下文），同时不加多余 DOM 节点。最稳妥的写法是用 ::after 伪元素 + clear: both：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意三个关键点：
立即学习“前端免费学习笔记（深入）”；
-
content必须有值（哪怕为空字符串），否则伪元素不渲染 - 用
display: table而不是block：兼容 IE8+，且不会因margin-collapse引发意外间距 - 不能漏掉
clear: both，否则只是多了一行空内容，起不到清除作用
IE6/7 下 clearfix 失效怎么办
老版本 IE 不支持 ::after 伪元素，得补一层 *zoom: 1 触发 hasLayout：
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
这里 *zoom 是 IE6/7 专用 hack，现代浏览器忽略它，不影响其他样式。如果项目已放弃 IE8 以下支持，这行可以删掉。
- 别用
_height: 1%这类更激进的 hack，容易干扰行高计算 - 如果用了 PostCSS 或 Autoprefixer，这类 hack 需手动保留，工具不会帮你加
- Vue/React 组件里直接写
class="clearfix"就行，无需 JS 检测浏览器
什么时候不该用 clearfix
当父容器本身已经是 BFC 容器时，浮动不会导致塌陷，加 clearfix 反而多余：
- 父元素设置了
overflow为auto、hidden、scroll（但注意裁剪风险） - 父元素是
display: flex、display: grid、display: inline-block - 父元素有
position: absolute或position: fixed
判断方法很简单：打开浏览器开发者工具，看父元素 computed 样式里有没有 display: block 且没触发 BFC —— 如果已经有 BFC，clearfix 就是画蛇添足。
真正容易被忽略的是：某些 CSS 重置库（比如 normalize.css）或 UI 框架（比如 Bootstrap 4+）默认给 body 或布局容器加了 overflow-anchor: auto 这类新属性，可能间接创建 BFC，这时候再套 clearfix 可能引发意料外的 margin 表现。
