CSS 中的 Overflow 属性及其值
原文约200字/词，阅读约需1分钟。
📝
内容提要
溢出 - 当内容元素无法容纳时，定义其行为。取值：可见、隐藏、滚动、自动。
🔎
延伸解读
默认行为：visible 无需显式设置
文章指出，overflow 的默认值是 visible，即使不写 overflow: visible，元素也会保持这一行为。这意味着溢出内容会直接显示在容器外，可能覆盖其他元素或导致布局混乱。因此，当看到内容意外溢出时，应首先检查是否未设置 overflow 属性，而非误以为存在其他样式干扰。
hidden 与 scroll 的取舍：隐藏内容还是强制滚动
overflow: hidden 会直接裁剪溢出部分，用户无法通过滚动查看，适合需要严格限制内容显示范围的场景。而 overflow: scroll 会始终添加滚动条，即使内容未溢出也会显示滚动条轨道，可能占用空间并影响视觉。两者选择取决于是否允许用户访问完整内容，以及是否接受滚动条常驻。
auto 的智能之处：按需显示滚动条
与 scroll 不同，overflow: auto 仅在内容实际溢出时才添加滚动条，内容未溢出时不会显示滚动条。这避免了不必要的界面元素，使布局更简洁。文章强调 auto 类似于 scroll 但“只在需要时”出现，因此对于内容量不确定的容器，auto 通常是更灵活的选择。
❓
Q&A
CSS中的overflow属性是什么？
overflow属性定义了当内容元素无法容纳时的行为。
overflow属性有哪些取值？
overflow属性的取值包括可见、隐藏、滚动和自动。
使用overflow: hidden;会有什么效果？
使用overflow: hidden;时，溢出部分在屏幕上被隐藏。
overflow: scroll;和overflow: auto;有什么区别？
overflow: scroll;始终显示滚动条，而overflow: auto;仅在需要时显示滚动条。
默认情况下，overflow属性的值是什么？
默认情况下，overflow属性的值是可见（visible）。
如何使用overflow属性来改善用户体验？
通过合理设置overflow属性，可以控制内容的显示方式，提升用户的浏览体验。
🏷️
