overflow 属性是浏览器对溢出内容的裁剪与滚动策略声明，不改变内容本身；hidden 会裁剪绝对定位子元素，clip 更安全；x/y 轴不可混用 visible 与 scroll；auto 按需显示滚动条，scroll 始终预留空间；text-overflow: ellipsis 需 white-space: nowrap 和 overflow: hidden 共同作用。
overflow 属性不是“开关”，而是浏览器对溢出内容的裁剪与滚动策略声明。它不改变内容本身，只决定容器是否“收容”或“暴露”超出边界的那部分。
overflow: hidden 会意外截断绝对定位子元素
很多人用 overflow: hidden 来隐藏多余内容，却没意识到它同时会裁剪 position: absolute 子元素——哪怕子元素的 top/left 值在容器可视范围内，只要其渲染区域超出容器边界，就会被切掉。
- 常见错误现象：
dropdown菜单、tooltip在父容器设了overflow: hidden后只显示一半甚至完全消失 - 根本原因：CSS 规范规定，
overflow非visible的容器会创建新的 包含块（containing block），且成为clip边界 - 解决思路：若需保留绝对定位子元素的自由溢出，改用
overflow: clip（现代浏览器支持），或把子元素移出该容器 DOM 结构
overflow-x: visible 和 overflow-y: scroll 不能共存
你写 overflow-y: scroll; overflow-x: visible;，浏览器不会按你写的执行。根据 CSS Overflow Level 3 规范，只要任一轴设为 scroll 或 auto，另一轴的 visible 就会被强制计算为 auto（水平方向）或 hidden（垂直方向）。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 实际效果：本想让下拉菜单水平溢出，结果菜单被截断，或出现讨厌的横向滚动条
- 可靠替代方案：给容器加
position: relative，再把需溢出的子元素设为position: absolute并手动控制left/right偏移 - 注意：此时子元素脱离文档流，不再影响容器高度，也不受父容器
overflow裁剪
auto 和 scroll 的滚动条行为差异影响体验
overflow: auto 只在内容真正溢出时才显示滚动条；overflow: scroll 则不管有没有溢出，都预留滚动条空间。这个区别在 macOS 上尤其明显——系统默认隐藏滚动条，但 scroll 仍会占用轨道宽度，导致布局“跳动”。
- 推荐日常使用
auto，除非你明确需要滚动条始终可见（比如设计稿要求 UI 一致性） -
textarea和body元素默认就是auto，不用额外设置 - 移动端慎用
scroll：iOS Safari 中，强制滚动条可能触发非预期的弹性滚动或卡顿
text-overflow: ellipsis 必须配合 overflow: hidden 才生效
单行省略号不是独立功能，而是一组 CSS 属性协同工作的结果。漏掉任意一个，... 就不会出现。
- 缺一不可的三要素：
white-space: nowrap（禁止换行）、overflow: hidden（裁剪溢出）、text-overflow: ellipsis（替换末尾） - 多行省略没有原生属性，
display: -webkit-box是目前最稳定方案，但不兼容 Firefox - 注意：如果父容器用了
flex或grid，需确保该文本元素未被拉伸（如避免flex: 1），否则nowrap可能失效
最常被忽略的一点：overflow 对 float 元素有“清浮动”副作用——设为 auto 或 hidden 会让父容器重新包裹浮动子元素，但这不是它的本职工作，是规范附带行为。别依赖它来修复浮动塌陷，用 display: flow-root 更语义清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
