overflow

overflow

overflow 是 CSS 中用于控制 当元素内容超出盒子范围时应该如何显示 的属性。它非常常用，尤其在做滚动区域、隐藏内容、处理浮层时。

overflow 的常见取值

1.visible（默认值）
内容会正常溢出，不做任何裁剪。

overflow: visible;

特点：

• 内容可溢出盒子外
• 不添加滚动条
• 不影响布局（看起来内容会撑出去）

2.hidden（隐藏）
超出的内容直接裁剪，不显示滚动条。

overflow: hidden;

特点：

• 常用于隐藏超出的背景图、做圆角遮罩、动画裁剪区
• 如果想滑动，需要配合 JS 或 touch-action

3.scroll（始终显示滚动条）
无论内容是否超出都出现滚动条。

overflow: scroll;

特点：

• 滚动条一直存在（即使没东西滚）
• 在现代 UI 中较少使用，但适合调试可滚动区

4.auto（根据需要显示滚动条）
内容超出时显示滚动条，不超出则不显示。

overflow: auto;

特点：

• 最常用！
• 浏览器自动判断是否需要滚动条

5.clip
隐藏超出部分，但行为更像“更严格的 hidden”。

overflow: clip;

与 hidden 不同点：

• 不能滚动内容（即使配合 JS 也不行）
• 用于精确裁剪，不创建滚动容器

6.单向控制：overflow-x 和 overflow-y
可以只控制横向或纵向：

overflow-x: auto;
overflow-y: hidden;

常见场景：

• 横向滑动卡片列表
• 只允许上下滚动页面
• X 方向禁止溢出（防止页面出现横向滚动条）