浮动导致父元素高度为0是因为浮动元素脱离普通文档流，父容器计算高度时忽略它们；这是css规范行为而非bug，常见于float子元素使父div不占高度、背景边框消失等现象。
为什么 float 会让父元素高度变成 0
因为浮动元素脱离了普通文档流，父容器在计算高度时“看不见”它们，只当它们不存在。这不是 bug，是 CSS 规范里明确的行为。
常见错误现象：div 包着几个 float: left 的子元素，但父 div 在页面上压根不占高度，背景色、边框全消失，后续元素直接往上贴。
- 只对设置了
float的子元素生效（inline-block或flex不触发） - 父元素本身不能是
display: inline或display: table-cell等不生成块级格式化上下文的类型 - 如果父元素同时用了
overflow: hidden，也能临时撑开，但这是副作用，不是本意
clearfix 类怎么写才真正通用
最稳妥的是微 clearfix（micro clearfix），用伪元素清除浮动，不依赖额外 HTML 结构，兼容 IE8+。
关键点在于：必须触发 hasLayout（IE）或 BFC（现代浏览器），且不能影响布局流。
/* 推荐写法 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
-
::before和::after都设为display: table，是为了在 IE8 中正确创建匿名表格单元格，从而触发 hasLayout - 只靠
::after+clear: both不够 —— 如果没有::before，IE7/8 下某些场景会失效 - 不要用
height: 0; overflow: hidden这类 hack，会裁剪position: absolute子元素或阴影
什么时候不该用 clearfix
现代项目里，很多场景其实不需要它 —— 用了反而增加维护成本。
- 父容器已设置
display: flex或display: grid：浮动本身就不该出现在 flex/grid 容器里，清除无意义 - 只有一两个浮动元素，且后续有固定高度/内容可撑开：比如页脚有
clear: both，那父容器清不清都一样 - 用
overflow: auto或overflow: hidden能满足需求：注意这会隐藏溢出内容，不是所有场景都能接受 - 正在用 CSS-in-JS 或 Tailwind：直接用
flex、grid或flow-root更自然
display: flow-root 是更干净的替代方案吗
是，但它不是万能的，得看目标浏览器支持情况。
display: flow-root 显式创建一个块级格式化上下文（BFC），天然包含清除浮动的能力，而且语义清晰、无副作用。
- Chrome 58+、Firefox 53+、Safari 10.1+ 支持；IE 完全不支持
- 比 clearfix 更轻量：不用伪元素，不产生额外 DOM 行为，不影响打印样式
- 不能和
float同时用于同一元素（会覆盖 float 效果） - 如果项目还要兼容 IE11，就别单独依赖它 —— 可以和 clearfix 共存：
.clearfix { display: flow-root; }，现代浏览器走 flow-root，老浏览器回退到伪元素方案
浮动塌陷本质是文档流理解问题，不是样式“没写对”。真正容易被忽略的，是忘记检查父容器是否意外被设成了 display: inline-block 或加了 vertical-align，这些也会干扰高度计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
