overflow:hidden能撑开浮动父容器是因为触发bfc，使父容器重新计算高度包含浮动子元素；但遇flex/grid、transform、absolute定位或显式height限制时会失效，且必然裁剪溢出内容。
overflow:hidden为什么能撑开浮动父容器
它不是靠“挡住”什么，而是强制父元素创建一个新的 BFC（块级格式化上下文）。BFC 的规则之一是：内部浮动子元素会被包含在内，父容器会重新计算高度来包裹它们。所以 overflow: hidden 生效的关键不在“隐藏”，而在“触发 BFC”。
哪些场景下加了overflow:hidden却没效果
常见失效不是代码写错，而是被其他样式干扰或用错了位置：
- 父容器本身已有
position: absolute或display: flex—— 这些本身已创建 BFC，再加overflow: hidden不会叠加效果，但可能意外裁剪内容 - 子元素用了
position: absolute且脱离文档流 —— 它本就不参与高度计算，overflow: hidden对它无效 - 父容器设置了
height或max-height—— 高度被显式限制，浮动再高也撑不开 - HTML 中父容器里有换行符或空格（如回车缩进），被解析为匿名文本节点 —— 此时父容器已有“内容”，
overflow: hidden仍生效，但高度可能比预期略高
overflow:hidden的副作用比清除浮动更值得警惕
它确实能快速解决塌陷，但代价是真实溢出内容会被裁剪。这不是 bug，是设计行为：
-
dropdown菜单、tooltip悬浮框一旦超出父容器边界，直接消失 -
box-shadow、border-radius外扩部分被截断，视觉上像“被砍了一刀” - 移动端某些 WebView 中，
overflow: hidden会破坏position: fixed子元素的定位逻辑 - 如果父容器本身需要滚动（比如卡片列表），
overflow: hidden会禁用滚动，且无法通过 JS 恢复
现代项目里更推荐的替代方案
除非要兼容 IE10 及更早版本，否则别把 overflow: hidden 当默认解法：
-
display: flow-root：专为此类问题设计，语义清晰，不裁剪、不滚动、不影响定位，Chrome 64+ / Firefox 58+ / Safari 15.4+ 全支持 -
::after伪元素 clearfix：需写全四要素 ——content: ""、display: table、clear: both、height: 0，漏任意一项都白搭 - 避免用
overflow: auto或overflow: scroll替代 —— 它们虽也触发 BFC，但可能在不需要时强行出现滚动条
真正容易被忽略的是：很多“塌陷”其实不是浮动导致的，而是外边距合并（margin collapse）或 display 类型变更（比如从 block 变成 inline-block）引发的。加 overflow: hidden 前，先用浏览器开发者工具看一眼 computed 样式里的实际 height 和 margin 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
