浮动元素导致父容器高度塌陷是因为其脱离普通文档流使父容器无法感知其高度这是CSS规范行为而非bug常见于文字环绕图片场景而非布局用途。浮动元素为什么会让父容器高度塌陷因为浮动元素脱离了普通文档流父容器在计算高度时直接“看不见”它们。这不是 bug是 CSS 规范定义的行为——float 的本意就是让文字环绕图片这类场景不是用来做布局的。常见错误现象div 包着几个 float: left 的子项但父 div 在 DevTools 里显示高度为 0背景色/边框都看不到后续兄弟元素直接往上顶布局错乱。别用 height 硬撑响应式下会失效别依赖 overflow: hidden 以外的 overflow 值比如 scroll 或 auto某些旧版 Safari 下可能不触发 BFC如果父容器本身需要滚动overflow: hidden 会意外裁剪内容得换方案clear: both 不是万能解但最可控clear: both 是语义最明确的清除方式它强制元素避开左右所有浮动常用于在浮动块末尾插入一个“清道夫”元素。使用场景需要精确控制清除位置、兼容性要求覆盖 IE8、或已有结构不便改父容器样式时。立即学习“前端免费学习笔记深入” ARTi.PiCS ARTi.PiCS是一款由AI驱动的虚拟头像生产器可以生成200多个不同风格的酷炫虚拟头像