overflow:hidden能清除浮动是因为它触发BFC，使父容器包含浮动子元素；但本质是隐藏溢出，非语义化清浮方案，现代推荐display:flow-root或Flex/Grid布局。
overflow:hidden 为什么能清除浮动
它不是专门用来清浮动的，而是触发了「块级格式化上下文（BFC）」——只要一个元素成为BFC容器，它就会包含内部浮动元素，不会让父容器高度塌陷。overflow:hidden 是最常用、副作用相对小的触发方式之一。
常见错误现象：parent 高度为 0，子元素浮动后“飘出”父容器，背景色/边框消失；用 float 布局时，后续兄弟元素上移占位。
注意：不是所有 overflow 值都有效，overflow:visible 不触发 BFC，overflow:auto 和 overflow:hidden 都可以，但后者更明确意图。
什么时候该用 overflow:hidden 清浮动
适合简单布局、不需要滚动、且父容器本身不依赖溢出内容可见性的场景。比如导航栏、卡片列表、侧边栏模块等固定结构区域。
使用场景包括：
- 纯展示型浮动布局（如多列图文混排），无交互滚动需求
- 父容器没有设置固定高度，又不想加空标签或伪元素
- 兼容性要求覆盖 IE8+（
overflow:hidden在 IE6/7 也有类似效果，但有其他 bug）
性能影响极小，但会意外裁剪 position:absolute 超出父边界的子元素——这点常被忽略。
overflow:hidden 的典型陷阱
它本质是“隐藏溢出”，不是“清除浮动”的语义化方案，所以副作用比想象中多：
-
overflow:hidden会让transform或position:fixed子元素被截断（尤其弹层、下拉菜单） - 在移动端，可能干扰
touchmove滚动行为，导致局部区域无法滑动 - 如果父容器本就设置了
max-height或动画，overflow:hidden可能掩盖真实布局问题 - IE6/7 下，
overflow:hidden会强制触发 hasLayout，可能引发 margin 合并异常或双倍边距
示例：一个下拉菜单从 .nav-item 弹出，若其父 .nav 设置了 overflow:hidden，菜单会被直接切掉。
比 overflow:hidden 更现代的替代方案
真正想“清除浮动”，应优先考虑语义清晰、副作用可控的方式：
- 对父容器用
display:flow-root——专为创建 BFC 设计，无裁剪副作用，Chrome 58+/Firefox 57+ 支持 - 用伪元素清浮动：
::after { content:""; display:table; clear:both; }，兼容性好，但需额外样式维护 - 改用
flex或grid布局，天然不依赖浮动，清浮动问题直接消失
现在写新项目，除非要保 IE10 以下，否则别把 overflow:hidden 当清浮动首选——它只是借了个能力，不是正解。
浮动本身已是过时布局手段，而 overflow:hidden 的清浮动效果，只是历史兼容缝隙里偶然有效的副产品。真遇到复杂嵌套或动态内容，它最先露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
