父元素高度为0是因浮动子元素脱离文档流；可用overflow:hidden触发BFC修复，但会裁剪溢出内容；伪元素::after清除浮动更干净；Flexbox布局下无需清浮动，应避免float与flex混用。
父元素高度为 0 是因为子元素 float 脱离文档流
只要子元素用了 float: left 或 float: right，它就不再参与父元素的高度计算——这是浏览器渲染规则，不是 bug。父元素表现为空盒子（border/背景不显示、后续元素上移），常见于导航栏、两栏布局、旧式卡片结构。
用 overflow: hidden 最快但得小心溢出内容
给父元素加 overflow: hidden 是最轻量的修复方式，它会触发 BFC（块格式化上下文），强制包含浮动子元素。
- 兼容性好，IE6+ 都支持
- 副作用是：如果子元素实际宽度或高度超出父容器，会被裁剪，且滚动条不会出现（
hidden的语义就是“不显示溢出”） - 若需保留滚动能力，改用
overflow: auto，但某些旧版 Safari 对auto渲染不稳定 - 别漏掉 IE6–7 的兼容写法：
zoom: 1（触发 hasLayout）
用伪元素 ::after 清除浮动更干净
现代项目推荐这个方案，HTML 无侵入，语义清晰，且不干扰溢出行为。
- 标准写法是：
.clearfix::after { content: ""; display: table; clear: both; } -
display: table比block更稳妥，避免部分浏览器下height: 0失效 - 必须确保父元素没设置
display: flex或display: grid，否则伪元素清除无效（flex/grid 容器本身已建立新格式化上下文） - 别只写
::after而忘了在父元素 class 上加clearfix，否则样式不生效
Flexbox 布局下根本不需要清浮动
如果你的父元素已经设了 display: flex，那子元素再用 float 是无效且危险的——float 在 flex 容器中被忽略，但会破坏对齐逻辑，还可能引发 Safari 旧版本渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是：去掉子元素的
float，改用flex: 1、margin或justify-content控制位置 - 如果父元素高度仍塌陷，大概率是它的父级没提供高度上下文（比如没设
min-height或没继承height: 100%） - 注意：flex 容器默认
flex-direction: row，垂直撑满需配合flex-direction: column或显式设height
真正容易被忽略的是：清除浮动只是补救措施，而现代布局应该主动规避 float。一旦项目允许，优先用 flex 或 grid 替代 float 布局；若必须兼容老系统，overflow: hidden + zoom: 1 是最稳的兜底方案。
