父元素高度塌陷是因为浮动元素脱离标准文档流，导致父容器无法计算其高度；常见于仅含浮动子元素的父容器，清除浮动应通过创建BFC（如display: flow-root）或伪元素clearfix实现。
父元素高度塌陷，是 CSS 浮动布局中最典型、最常被忽视的问题。根本原因只有一个：浮动元素脱离了标准文档流，导致父容器“看不见”子元素的高度，从而计算出 0 高度。
为什么浮动会让父元素高度为0？
标准流中，块级元素会自然撑开父容器；但一旦设置了 float: left 或 float: right，该元素就从文档流中“抽离”——它不再占据原来的空间，也不再参与父容器的高度计算。父元素就像没装东西的空盒子，边框可能还在，但内部高度塌成一条线。
- 浮动元素视觉上还在页面里，但逻辑上已“隐身”于布局引擎的尺寸计算之外
- 即使多个浮动子元素堆满整行，父容器仍可能显示为高度 0（尤其当没有其他非浮动内容时）
- 这个现象在调试时容易误判为“样式没生效”，实则是布局机制使然
哪些情况会加剧塌陷表现？
不是所有浮动都会立刻暴露问题，但以下组合会让塌陷更明显、影响更广：
- 父元素仅包含浮动子元素，无任何普通流内容（如文本、未浮动 div）
- 父元素设置了边框或背景色，塌陷后直接“消失”或只显示边框线
- 后续兄弟元素紧挨着该父容器，因父容器高度为 0，兄弟元素会上移、错位甚至被遮挡
- 使用 margin/padding 布局时，塌陷导致外边距合并异常或间距失效
清除浮动不是目的，恢复文档流感知才是关键
所谓“清除浮动”，本质是让父容器重新获得对子元素尺寸的感知能力。常见方法效果不同，适用场景也不同：
立即学习“前端免费学习笔记（深入）”；
- overflow: hidden：简单直接，但会裁剪溢出内容（如下拉菜单、tooltip），慎用于交互组件
-
伪元素 clearfix：推荐首选，用
::after插入一个清除块，不加额外标签，兼容性好 - 额外空 div + clear: both：直观易懂，但污染 HTML 结构，已逐渐淘汰
- display: flow-root（现代方案）：一行代码创建 BFC，彻底隔离浮动影响，无副作用
顺便提醒一个易混淆点
有人以为给父元素加 height 或 min-height 就能解决——这只能掩盖问题，不能修复布局逻辑。一旦子元素内容动态变化（比如文字增多、图片加载完成），高度又会不匹配。真正可靠的解法，始终围绕“让父容器重新识别浮动子元素的存在”展开。
