父容器高度塌陷为0是因浮动元素脱离文档流，父容器无法感知其高度；可通过clear:both（加在末尾子元素或伪元素）或触发BFC（推荐display:flow-root）解决；Flex/Grid布局下天然避免该问题。
为什么父容器高度变成 0 了？
当子元素全部浮动（float: left 或 float: right），而父容器没设高度时，父容器高度常“塌”成 0。这不是 bug，是 CSS 规范行为：浮动元素脱离普通文档流，父容器在计算高度时直接“看不见”它们。
典型现象：div 包着几个 float: left 的 img 或 section，结果父 div 背景、边框全没了，下方内容往上顶——它真就“没高度”了。
clear: both 能不能立刻解决？
能，但要看加在哪。最常见错误是只给浮动子元素加 clear，这没用；必须加在父容器内部的**最后一个子元素**上，或额外插入一个清浮动的元素：
- 在父容器末尾加：
- 或者给父容器最后一个浮动子元素加：
style="clear: both"（前提是它本身也浮动） -
clear: both只对块级元素生效，span等内联元素加了无效
缺点：多出 DOM 节点，语义不清，维护成本高。
立即学习“前端免费学习笔记（深入）”；
BFC 是更干净的解法吗？
是，而且推荐优先用。BFC（Block Formatting Context）会让容器“重新计算内部布局”，把浮动子元素的高度纳入自身高度计算中。触发 BFC 的方式很多，选哪个得看场景：
-
overflow: hidden（最常用，但注意会裁剪溢出内容） -
overflow: auto（带滚动条风险，慎用于无交互区域） -
display: flow-root（现代标准写法，无副作用，Chrome 64+/Firefox 58+ 支持） -
position: absolute或fixed（脱离文档流，父容器不再参与布局，一般不用来救塌陷）
推荐现在新项目统一用 display: flow-root，老项目兼容 IE 就用 overflow: hidden，但务必检查是否真有内容会溢出。
Flex/Grid 布局下还用管塌陷吗？
基本不用。一旦父容器设了 display: flex 或 display: grid，它自动成为新的格式化上下文，浮动子元素对其高度计算不再“失效”。但要注意：
- 子元素如果仍设了
float，浮动行为会被忽略（Flex/Grid 有自己的排列机制） - 如果只是想让子元素横排，直接用
flex-direction: row，别混用float - 用 Flex 后再加
clear或overflow属于冗余操作
真正容易被忽略的是：很多人修塌陷时只盯着父容器，却忘了检查子元素是否意外继承了 float，或被第三方 CSS 注入影响。建议用浏览器开发者工具的“Computed”面板直接看 float 计算值，比猜快得多。
