overflow: hidden 裁剪溢出内容并禁用滚动，非仅隐藏滚动条；可用于图片圆角裁切，但会触发bfc、影响动画性能及焦点管理，需配合其他属性保障可访问性。
overflow: hidden 会阻止内容溢出容器，但不等于“隐藏滚动条”
很多人以为 overflow: hidden 是专门用来“隐藏滚动条”的 CSS 声明，其实它真正的行为是：**强制裁剪超出容器边界的内容，并同时禁用所有方向的滚动能力**。也就是说，它既不是“只藏滚动条”，也不是“只截断”，而是“截断 + 禁滚动”一步到位。
典型误用场景：overflow: hidden 加在有 textarea 或内嵌 iframe 的容器上，结果用户完全无法滚动查看完整内容，且无任何提示——这不是隐藏 UI，是直接剥夺交互。
- 想隐藏滚动条但保留滚动能力？得用
overflow: auto配合scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }（Chrome/Safari） - 想安全截断文本？优先考虑
text-overflow: ellipsis+white-space: nowrap+overflow: hidden组合，而非对整块区域粗暴设hidden -
overflow: hidden会触发 BFC（块级格式化上下文），意外清除浮动或影响 margin 合并——这点常被忽略
用 overflow: hidden 实现“图片裁圆角+防溢出”的常见写法
当给 <img alt="HTML5布局overflowhidden有何用_隐藏滚动条或截断内容的场景说明【技巧】" > 外层加 border-radius 时，若图片原始宽高比与容器不一致，边缘常会“撑破”圆角——此时 overflow: hidden 是最轻量、最可靠的兜底方案。
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover; /* 配合使用，避免拉伸变形 */
}注意：object-fit: cover 负责缩放适配，overflow: hidden 负责物理裁切。两者缺一不可；只设 cover 不设 hidden，在某些旧版 Safari 中仍可能看到尖角溢出。
立即学习“前端免费学习笔记（深入）”；
overflow: hidden 在动画/过渡中容易引发渲染卡顿
当对一个已设 overflow: hidden 的容器做 transform: scale() 或 height 过渡时，浏览器必须在每一帧重新计算并裁切内容区域，尤其在含大量子元素或复杂 SVG 的情况下，GPU 渲染压力陡增。
- 动画中需动态显示/隐藏内容？改用
visibility: hidden+opacity过渡，比切换overflow更平滑 - 必须用
overflow: hidden做折叠动画？把动画目标限定在max-height上，并设一个足够大的固定值（如max-height: 500px），避免 layout 波动 - 移动端 Safari 对
overflow: hidden容器内的position: fixed元素支持不稳定，慎用于弹窗遮罩层
overflow: hidden 不会阻止 focus 移入被裁切的内容
这是最隐蔽也最容易出问题的一点：即使内容被 overflow: hidden 裁掉，只要 DOM 存在且可聚焦（比如一个 button 在裁切区下方），键盘 Tab 仍会把它纳入焦点流——用户看不见它，却要按两次 Tab 才跳过，造成可访问性灾难。
修复方式不是去掉 hidden，而是配合逻辑控制：
- 裁切区域内的可交互元素，在视觉隐藏时同步加
tabindex="-1"或aria-hidden="true" - 用 JavaScript 监听容器尺寸变化，当子元素完全不可见时，主动
element.blur()并移除tabindex - 若为纯展示型裁切（如轮播图当前项外的 slide），确保非激活项的
aria-hidden="true"和inert属性同时存在
裁切是视觉层的事，焦点管理是语义层的事——两者必须分开考虑，不能指望 overflow: hidden 一劳永逸。
