父元素高度塌陷时不能直接写height，因为浮动元素脱离文档流导致父容器无法感知实际高度；固定height会破坏自适应能力，引发溢出或截断；clearfix伪元素方案比overflow:hidden更稳定可靠。
父元素高度塌陷时，为什么不能直接写height？
因为浮动元素脱离文档流，父容器无法感知子元素实际高度，height写死会切断内容自适应能力——文字变多、图片加载失败、响应式断点切换，都会导致内容溢出或留白错乱。
常见错误现象：div里放几个float: left的li，父ul在开发者工具里显示高度为0，背景色/边框全消失；或者写了个height: 200px，结果手机上内容被截断。
- 响应式布局中，
height固定值无法随屏幕缩放自动调整 - 动态插入内容（如 JS 渲染列表）后，高度立刻不匹配
- 使用
min-height替代仍不能解决“清除浮动”本质问题——它只是妥协，不是修复
用clearfix类比写overflow: hidden哪个更稳？
clearfix是明确、可控、无副作用的方案；overflow: hidden看似简单，但会意外裁剪position: absolute子元素、遮挡box-shadow、干扰transform动画，尤其在 Modal 或 Tooltip 场景下极易出 bug。
标准clearfix写法（兼容 IE8+）：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
- 必须加在浮动元素的**直接父容器**上，不能写在 body 或更高层级
- 如果父容器本身有
zoom: 1（IE6/7），可省略::after，但现代项目建议统一用伪元素写法 - 不要用
clear: both单独加在最后一个浮动元素后——它只清自己后面，不撑父级
Flex/Grid 布局下还用clearfix吗？
不用。只要父容器设了display: flex或display: grid，浮动行为本身就失效了，父容器天然包裹子项，高度不会塌陷。
但要注意：如果你还在用float做布局（比如老项目维护），就别指望 Flex 父容器“自动修复”——float和 Flex 共存时，浮动元素依然脱离文档流，clearfix照常需要。
- 迁移建议：把
float: left换成flex: 0 0 auto，同时移除clearfix类 - 检查是否误用了
float来实现居中或分栏——那本该用justify-content或grid-template-columns - 某些 CSS 重置库（如 Normalize.css）默认不重置
float，得靠人眼识别，不是浏览器自动兜底
现代项目里clearfix要手写还是用工具链注入？
手写更轻量、更可控。PostCSS 插件（如postcss-clearfix）或 Sass @mixin clearfix可以避免重复，但过度封装反而让团队新人看不懂“为什么这里要加clearfix”。
真正容易被忽略的是：**清除浮动必须作用于浮动元素的最近父容器**。很多人给body加clearfix，或者在中间某层无关容器上加，结果完全无效。
- 推荐做法：在 HTML 模板中，浮动容器的 class 直接带
clearfix，例如<div class="card-list clearfix"> - 不要依赖 JS 动态加 class——CSS 清除浮动是纯样式层的事，JS 注入反而增加执行时机风险
- 如果用 Tailwind，对应的是
after:content-[''] after:table after:clear-both组合，但语义不如独立 class 清晰
