Safari（尤其iOS）中overflow: hidden失效需同时满足：弹层设显式height/max-height且加transform: translateZ(0)创建层叠上下文；flex子项溢出需逐层加min-width: 0；菜单应提至body下动态定位，避免嵌套滚动容器。
overflow: hidden 为什么在弹层菜单里不管用
不是你写错了，是 Safari（尤其是 iOS）根本不会执行它——只要父容器没显式高度、没触发层叠上下文，overflow: hidden 就像没写一样。常见于 position: fixed 弹层 + 内部浮动菜单的组合，手指一滑，菜单直接被裁掉或穿透滚动到页面底部。
必须同时满足两个条件才可能生效：
- 给弹层容器设
max-height或height（仅靠flex: 1或100vh不够稳定） - 加
transform: translateZ(0)或will-change: transform强制创建层叠上下文 - 绝对不能把
overflow: hidden直接写在body或html上，Safari 会无视
浮动菜单本身溢出屏幕怎么办
菜单内容（比如长文字、未换行 URL、图标+文字组合）撑破容器宽度，不是“浮动”导致的，而是 flex 子项默认 min-width: auto 拒绝压缩。重点不在清除浮动，而在收缩控制。
关键操作是逐层加 min-width: 0：
立即学习“前端免费学习笔记（深入）”；
- 只加在参与 flex 分配的直系子元素上，例如
.menu-item，而不是整个.dropdown-menu - 如果菜单项内部还有 flex 布局（如头像+标题+箭头），内层容器也要加
min-width: 0 - 配合
white-space: nowrap+overflow: hidden+text-overflow: ellipsis才能真正截断 - 避免在 flex 项里写
width: 100%，它和flex: 1冲突，改用flex: 1 1 0
滚动时菜单被裁剪或错位
这是最典型的“溢出菜单”问题：可滚动区域（overflow-y: auto）里弹出的 position: absolute 菜单，被父容器裁掉，或 iOS 下因 -webkit-overflow-scrolling: touch 导致定位偏移。
解决路径很明确：
- 菜单不要放在滚动容器内部，提一层到
body下，用 JS 动态计算位置 - 若必须嵌套，滚动容器需加
overscroll-behavior-y: contain（iOS 16.4+ 支持），阻止滚动穿透 - 禁用
-webkit-overflow-scrolling: touch，改用原生滚动；它会让position: fixed/absolute子元素错位 - 确保菜单容器有
box-sizing: border-box，否则 padding 会撑宽导致横向溢出
现代方案：别用浮动做菜单布局
浮动本就不是为菜单设计的。当前所有主流框架（React/Vue 组件库）都用 flex 或 grid 实现菜单项排列，既自动处理溢出，又无需清除浮动。
真要兼容老项目，优先重构而非修补：
- 两列菜单项？用
display: flex; flex-wrap: wrap替代float: left - 图标+文字垂直居中？用
align-items: center，不是float+line-height堆砌 - 旧代码里还留着
clearfix？删掉，换成display: flow-root（Safari 15.4+ 支持）
真正难的不是让菜单不溢出，而是判断它该不该出现在滚动容器里——多数时候，把它提到 body 下，反而更可控、更少坑。
