overflow:hidden能“清除浮动”实为触发bfc使父容器包含浮动子元素高度，并非设计初衷；但会裁剪溢出内容、影响absolute/fixed定位，现代应优先用display:flow-root。
overflow:hidden 会意外清除浮动
它不是“设计用来”清浮动，但因为触发了 BFC（块格式化上下文），父容器就能包含内部浮动子元素的高度。常见于老式布局中用 overflow:hidden 替代 clear:both 或伪元素清浮。
容易踩的坑：
- 如果父容器本身
height: auto且没设宽高限制，overflow:hidden仍可能不生效——BFC 触发了，但裁剪区域不存在 - 在 Flex 或 Grid 容器里加
overflow:hidden不会清浮动（因为子项已脱离常规文档流），此时无效 - 某些场景下，它会把
margin-top拉伸到父容器外（margin 折叠被阻止），导致布局偏移，看似“隐藏”了间距，其实是 BFC 的副作用
overflow:hidden 能屏蔽绝对定位子元素的溢出
当子元素是 position: absolute，它是否被裁剪，取决于父容器是否建立了「包含块」。而 overflow:hidden 只有在父元素同时满足 position: relative | absolute | fixed 时，才会让这个包含块具备裁剪能力。
也就是说：overflow:hidden 单独写在 static 定位的父元素上，对绝对定位子元素完全无效——它既不裁剪，也不影响其定位参考点。
实操建议：
- 要裁剪绝对定位内容，必须配对使用：
position: relative+overflow:hidden - 移动端 Safari 对此组合更敏感，偶尔出现渲染延迟，可加
transform: translateZ(0)强制硬件加速 - 不要指望它“隐藏 z-index 很低的绝对定位元素”——裁剪只看坐标和边界，跟层级无关
overflow:hidden 会让滚动条彻底消失，且不可恢复
这不是“隐藏滚动条样式”，而是直接禁用整个滚动机制。一旦在 html 或 body 上设置 overflow:hidden，scrollTo()、滚轮、触摸拖动全部失效，连 scrollTop 都读不到变化。
典型误判场景：
- 弹窗组件打开时悄悄给
body加了overflow:hidden，关闭后忘了还原 - 第三方 UI 库的 CSS 末尾带
!important，覆盖了你后续写的overflow:auto - 写了
overflow-x:hidden却没显式声明overflow-y，结果浏览器按规范重置overflow-y: visible，但因父容器无高度约束，反而无法滚动
overflow:hidden 不会隐藏 DOM 节点，但会影响可访问性
被裁剪的内容仍在 DOM 中，getBoundingClientRect() 返回的 width/height 是容器尺寸，但 offsetWidth/offsetHeight 仍是完整值；屏幕阅读器仍能读取被裁剪文本，键盘 Tab 也能聚焦到隐藏区域内的可交互元素（比如按钮）。
这意味着：
- 仅靠
overflow:hidden做“条件显示”是危险的——用户看不见，但能 tab 进去、能被读屏读到 - 若想真正移除交互与语义，得配合
visibility:hidden（保留占位）或display:none（彻底退出流） -
text-overflow: ellipsis必须和overflow:hidden+white-space: nowrap一起用，少一个就失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
