overflow: hidden 能解决高度塌陷，因为它触发BFC使父容器重新包裹浮动子元素；其他方法包括伪元素清除法、display: flow-root及额外空标签法，但需注意hidden可能裁剪溢出内容。
父容器包不住浮动子元素，是因为浮动元素脱离了普通文档流，父容器无法感知其高度，导致高度塌陷。给父元素设置 overflow: hidden 是一种经典且有效的清除浮动方式，它会触发父元素的 BFC（块级格式化上下文），使父容器重新包含浮动子元素。
为什么 overflow: hidden 能解决高度塌陷
当一个元素触发 BFC 时，它会独立计算内部布局，包括正确包裹浮动子元素。overflow: hidden（以及 auto、scroll 等非 visible 值）正是常见的 BFC 触发条件之一。此时父容器不再“忽略”浮动子元素的高度，从而撑开自身。
其他同样有效的清除浮动方法
-
伪元素清除法（推荐）：在父元素上添加
::after伪元素并设为clear: both，语义清晰且不影响溢出行为：.parent::after { content: ""; display: table; clear: both; } -
使用 display: flow-root（现代方案）：直接触发 BFC，且不改变溢出表现：
.parent { display: flow-root; }（兼容性较好，Chrome 64+/Firefox 62+/Edge 79+ 支持） -
额外空标签清除（不推荐）：在子元素末尾加
<div style="clear:both"></div>，冗余且破坏结构语义
使用 overflow: hidden 的注意事项
虽然有效，但需留意副作用：
- 如果子元素实际需要横向溢出（如长文本、横向滚动区域），hidden 会将其裁剪；
- 若父容器本应有阴影、圆角或边框，而子元素浮动后超出原范围，overflow: hidden 可能意外隐藏这些视觉效果；
- 在移动端，有时会干扰 touch 滚动行为（尤其配合 transform 时）。
快速判断是否该用 overflow hidden
适合用它的情况：
- 父容器本身不需要内容溢出（如导航栏、卡片、简单图文模块）；
- 项目兼容性要求覆盖 IE8+；
- 快速修复、临时调试场景。
不适合的情况：
- 父容器内有绝对定位元素延伸到外部；
- 需要支持横向滑动或下拉刷新；
- 设计明确允许内容自然溢出（如 banner 文字飞入动效）。
