overflow

overflow

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

overflow 的常见取值

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

overflow: visible;

特点：

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

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

…


This content originally appeared on DEV Community and was authored by NikiMunger

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 方向禁止溢出（防止页面出现横向滚动条）


This content originally appeared on DEV Community and was authored by NikiMunger


Print Share Comment Cite Upload Translate Updates
APA

NikiMunger | Sciencx (2025-11-20T03:01:44+00:00) overflow. Retrieved from https://www.scien.cx/2025/11/20/overflow/

MLA
" » overflow." NikiMunger | Sciencx - Thursday November 20, 2025, https://www.scien.cx/2025/11/20/overflow/
HARVARD
NikiMunger | Sciencx Thursday November 20, 2025 » overflow., viewed ,<https://www.scien.cx/2025/11/20/overflow/>
VANCOUVER
NikiMunger | Sciencx - » overflow. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/11/20/overflow/
CHICAGO
" » overflow." NikiMunger | Sciencx - Accessed . https://www.scien.cx/2025/11/20/overflow/
IEEE
" » overflow." NikiMunger | Sciencx [Online]. Available: https://www.scien.cx/2025/11/20/overflow/. [Accessed: ]
rf:citation
» overflow | NikiMunger | Sciencx | https://www.scien.cx/2025/11/20/overflow/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts