overflow: hidden 通过触发 bfc 使父容器包含浮动子元素并正确计算高度，而非清除浮动；但父元素若浮动、绝对定位、有 max-height 限制或子元素使用 transform 等，该方法会失效。
overflow: hidden 为什么能撑开父容器
浮动元素脱离文档流，父容器高度塌陷是常见错位根源。overflow: hidden 触发 BFC（块级格式化上下文），让父容器重新“感知”浮动子元素的边界，从而自动包裹它们——这不是靠“清除浮动”，而是靠 BFC 的布局隔离规则强制重绘包含块。
- BFC 容器不会和浮动元素重叠，且会包含其内部浮动子元素的高度
- 只要父元素没有设置固定高度或
height: 0，overflow: hidden就能使其正确计算高度 - 注意：
overflow: visible不触发 BFC，overflow: auto和scroll同样有效，但可能引入滚动条或隐式行为
哪些场景下 overflow hidden 会失效
它不是万能清浮方案，一用就灵的前提是父容器本身没被其他 CSS 干扰布局逻辑。
- 父元素设置了
float、absolute或fixed定位 → 它自己已脱离文档流，无法“撑高” - 父元素有
display: inline-block或table-cell→ 这些 display 值虽可触发 BFC，但盒模型行为不同，高度计算仍可能异常 - 子元素用了
transform或will-change→ 可能创建新的层叠上下文或独立渲染区域，绕过 BFC 包含逻辑 - 父元素设置了
max-height且值过小 → 即使触发 BFC，内容也会被截断，看起来像“没生效”
比 overflow hidden 更稳妥的替代方案
当需要兼容性、语义清晰或避免隐藏溢出内容时，overflow: hidden 反而成了副作用源头。
- 用
::after伪元素 +clear: both：最经典、无副作用，适用于静态布局.clearfix::after { content: ""; display: table; clear: both; } - 设父元素
display: flow-root：现代标准解法，明确声明创建 BFC，不改变溢出行为，Chrome 58+ / Firefox 57+ / Safari 10.1+ 支持 - Flex 或 Grid 布局直接替代：如父容器设
display: flex，子项浮动将被忽略（浮动在 flex item 上无效），天然不塌陷
实际调试时怎么快速验证是不是浮动导致的塌陷
别猜，用开发者工具直观看盒模型。
- 选中疑似塌陷的父容器，在 Styles 面板检查 computed height 是否为
0px或远小于预期 - 临时加
outline: 1px solid red到父容器，观察是否只包住文字/行内内容，而不包住浮动块 - 在 Elements 面板里右键浮动子元素 → “Scroll into view”，看它是否飘到父容器可视区外——这是塌陷的视觉铁证
- 临时删掉子元素的
float，看父容器高度是否立刻恢复正常
overflow: hidden 只是触发它的手段之一；真正容易被忽略的是：父容器自身的定位、display 和尺寸约束，往往比“要不要加 hidden”更决定成败。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
