能，overflow: hidden 通过触发 BFC 解决浮动导致的父元素塌陷，但仅对无固定高度的块级非替换元素有效，且需注意兼容性与误用场景。
overflow: hidden 真的能防止父元素塌陷吗？
能，但不是因为它“隐藏了什么”，而是它触发了 BFC（块级格式化上下文）。只要一个元素建立了 BFC，它内部的浮动元素就不会影响外部布局，父容器自然就能正确包裹子元素高度。
常见错误现象：div 里有 float: left 的子元素，父 div 高度为 0，背景/边框看不见——这就是典型的塌陷。
- 只对**非替换元素**且未设置固定高度的块级容器有效
- 如果父元素本身是
inline或inline-block，overflow: hidden不会生效（需先设display: block） - 某些旧版 Android WebView 对
overflow: hidden触发 BFC 支持不一致，建议加zoom: 1兼容 IE6–7
除了 overflow: hidden，还有哪些方式能触发 BFC？
BFC 是解决塌陷的根本机制，overflow: hidden 只是其中一种触发条件。关键看是否满足 BFC 触发规则：
-
float值不为none -
position为absolute或fixed -
display为flow-root（现代推荐，语义清晰且无副作用） -
overflow为hidden、auto、scroll（注意：visible不触发）
推荐优先用 display: flow-root：它专为此设计，不会意外裁剪内容或影响滚动行为，overflow: hidden 则可能把溢出的下拉菜单、tooltip 截掉。
立即学习“前端免费学习笔记（深入）”；
为什么 overflow: hidden 有时“没用”？
看似加了却还是塌陷，大概率是被其他样式覆盖或前提不满足：
- 父元素有
height或max-height固定值，BFC 仍建立，但高度被锁死——删掉固定高度再试 - CSS 优先级问题：比如某处写了
overflow: visible !important，直接覆盖了hidden - 父元素是 flex 容器（
display: flex），此时它默认就具备类似 BFC 的隔离能力，无需额外设置；但若同时设了flex-direction: column+ 浮动子项，反而可能因渲染逻辑差异表现异常 - 检查是否误写成
overfow: hidden（拼错）或写在子元素上而非父元素
实际项目中该选哪个方案？
按场景选，别硬套 overflow: hidden：
- 需要父容器严格包裹浮动子项，且确认不会有内容溢出 →
overflow: hidden快速有效 - 要兼容老浏览器（IE8+），又不想用
zoom黑科技 →overflow: auto更稳妥（视觉上和hidden几乎一致） - 新项目、支持现代 CSS → 直接上
display: flow-root，语义对、无副作用、调试友好 - 只是临时调试，不想改样式 → 用伪元素清除法：
::after { content: ""; display: table; clear: both; }，但它不创建 BFC，只是视觉撑开
真正容易被忽略的是：BFC 解决的是浮动导致的塌陷，如果塌陷是因为子元素全是 position: absolute 或 display: inline，那加 overflow: hidden 也没用——得先确认塌陷的真实原因。
