父容器高度为0是因为浮动元素脱离标准文档流，布局引擎无法计算其高度；解决方法是用display: flow-root、flex或grid重建布局感知，而非无效的clear或height设置。
浮动元素脱离标准文档流，父容器在布局计算阶段直接“看不见”它们的高度——这不是 bug，是 CSS 规范对 float 的明确定义。
为什么父容器高度会变成 0
当一个元素设置 float: left 或 float: right，它就从标准文档流中被移除：
- 不再参与父容器的 height、width、margin 合并等尺寸计算
- 仍保留在页面物理空间中（区别于 position: absolute），所以视觉上还在，但布局引擎已忽略它
- 若父容器内所有子元素都浮动，且没有其他非浮动内容（比如文本、未浮动的 div），父容器的 offsetHeight 就是 0
- 开发者工具里能看到背景色消失、border 缩成一条线、后续兄弟元素上移覆盖
常见误判和无效操作
这些做法看似在“修”，实则没碰到底层机制：
- 给父容器加 height: auto 或 min-height：只是临时掩盖，内容一变（如图片加载完成、文字增多）立刻露馅
- 在父元素上写 clear: both：clear 只作用于自身，不是用来“清理子元素”的，加在父容器上完全无效
- 用 visibility: hidden 或 opacity: 0 替代清除：不触发 BFC，对塌陷毫无影响
- 把中间栏也设成 float：让它进入浮动流，反而加剧换行和错位
真正起效的原理是“让父容器重新感知子项”
核心思路不是“清除”，而是“重建容器对浮动子项的布局感知能力”。可行路径有两条：
- display: flow-root：现代标准解法，一行代码创建 BFC，父容器自然包含所有浮动子项，且不裁剪 box-shadow、下拉菜单等溢出内容
- 改用 display: flex 或 display: grid：这些布局模式本身就不依赖文档流计算高度，浮动属性在其中自动失效，天然无塌陷问题
- 回退方案如 overflow: hidden 能触发 BFC，但副作用明显：可能意外裁掉 tooltip、弹窗、动画位移等超出父容器的内容
最容易被忽略的是：加了 flow-root 或 flex 后高度“回来”了，不代表布局稳了。还得检查是否触发了 margin-collapse、vertical-align 基线偏移，或者父容器用了 min-height 与子项实际高度冲突——这些会让视觉看起来正常，但和相邻元素的间距异常。
