overflow:hidden并非专为清除浮动设计，而是因触发bfc使父容器包含浮动子元素；但会裁剪溢出内容，导致弹层、fixed元素被截断或移动端滚动异常，现代推荐display:flow-root或flex/grid布局。
overflow:hidden 不是“清除浮动”，它只是意外触发了 BFC，让父容器重新包含浮动子元素——但代价是可能切掉弹层、下拉菜单或 fixed 元素。
overflow:hidden 触发 BFC 的真实条件
只有当元素同时满足以下三点时，overflow:hidden 才会触发 BFC：
- 计算后的
overflow值不是visible（auto、scroll、hidden都行） - 该元素不是根元素（即不是
） - 该元素是块级盒（
display为block、flow-root、table-cell等，不包括inline或flex）
常见误判：overflow:hidden 在 display:inline-block 或 display:flex 容器上不会触发 BFC；IE6/7 下靠 zoom:1 模拟，但行为不稳定。
为什么 overflow:visible 不行，而 hidden 可以
overflow:visible 是唯一明确**不触发 BFC** 的 overflow 值。W3C 渲染规范规定：只要 overflow 计算值为 visible，即使其他样式（如 position:relative）存在，也不会创建新 BFC。
而 overflow:hidden 明确要求“裁剪溢出内容”，浏览器必须为此建立独立的格式化上下文，否则无法判断哪些内容该被裁掉——这正是它“附带”包含浮动子元素的根本原因。
注意：overflow:auto 同样触发 BFC，但它在内容未溢出时可能不显示滚动条，视觉上更“安全”，但语义仍是“可能滚动”，不是“强制包含”。
overflow:hidden 清浮动的典型陷阱
它本质是隐藏裁剪，不是布局修复，副作用比多数人预想的更直接：
-
position:absolute或position:fixed子元素一旦超出父边界，会被无声截断（比如下拉菜单、Tooltip、Modal） - 移动端上，
touchmove事件在该容器内可能被拦截，导致局部区域无法滑动 - 配合
transform（如scale(0.95)）时，裁剪边界仍按原始尺寸计算，容易误切 - 动画中若父容器高度动态变化，
overflow:hidden可能掩盖重排失败或渲染错位问题
这些都不是 bug，而是 BFC 裁剪行为的自然结果——你没声明“我要清浮动”，你只写了“请把多出来的部分藏起来”。
现代项目里更靠谱的替代方案
真正想解决“父容器不包裹浮动子元素”，优先选语义明确、无裁剪副作用的方式：
-
display:flow-root：专为创建 BFC 设计，Chrome 58+/Firefox 57+ 支持，零副作用，推荐新项目首选 -
::after伪元素 +clear:both：兼容 IE8+，只需一段复用样式，无布局干扰 - 直接改用
display:flex或display:grid：浮动本身就不该用于布局，现代布局方案天然规避该问题
除非你在维护一个必须支持 IE9 且不能改结构的老系统，否则别把 overflow:hidden 当清浮动正解——它只是借了个能力，还悄悄动了你的视觉边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
