0Pricing
CSS Academy · 课时

overflow：hidden、scroll、auto、clip

使用 hidden、scroll、auto 和 clip 值控制溢出内容的处理方式。

overflow：hidden、scroll、auto、clip 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

overflow 属性回顾

overflow 控制元素内容超出其定义尺寸时的处理方式。它会同时作用于两个轴（如需分别控制每个轴，请使用 overflow-x/overflow-y）。

overflow: visible

visible（默认值）——内容会渲染到盒子外部。它不会创建块格式化上下文（BFC）。其他元素可能会与溢出的内容重叠。

overflow: hidden

hidden 会在盒子边界处裁剪内容。它会创建 BFC，从而包含浮动并阻止外边距折叠。这是圆角图像容器最常用的值。

  <div class="rounded-card"></div>

overflow: scroll

scroll 始终显示滚动条（在支持滚动条的轴上），无论内容是否溢出。它适用于需要保持界面一致的场景，因为始终保留滚动条槽可以避免布局偏移。

  <div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>

overflow: auto

auto 仅在内容实际溢出时显示滚动条。对于大多数可滚动容器，推荐使用此值，因为它可以避免不必要地渲染滚动条。

  <div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>

overflow: clip

clip 像 hidden 一样裁剪内容，但不会（NOT）创建 BFC。这意味着它不会影响浮动包含或外边距折叠。如果您希望裁剪内容但不产生 BFC 的副作用，请使用此值。

  <div class="decorative-overflow"><div class="deco"></div></div>

overflow-x 与 overflow-y

分别控制每个轴。一个非常常见的模式是：宽内容（表格、代码）支持水平滚动，同时让垂直溢出保持可见：

  <div class="table-wrapper">
    <table>
      <tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
      <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </table>
  </div>

溢出与 BFC

将 overflow 设置为除 visible 和 clip 以外的任何值，都会创建块格式化上下文。这样可以包含内部浮动，防止外边距折叠向外泄漏，并建立新的滚动上下文。

overflow: overlay（非标准）

overflow: overlay 会将滚动条绘制在内容上方，而不是占用布局空间。它曾是某些浏览器中的非标准值，目前正逐步弃用，转而采用现代滚动条样式。

scrollbar-gutter

新的 scrollbar-gutter: stable 属性会预留滚动条空间，即使当前不需要滚动条也不例外，从而防止内容变为可滚动时发生布局偏移。

  <div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>

溢出与固定定位子元素

一个常见错误是：带有 position: fixed 的子元素位于带有 overflow: hidden 的元素内部时，会表现得像 position: absolute 一样——固定定位会相对于包含块进行，而溢出会创建新的堆叠上下文。

快速检查

哪个 overflow 值可以在不创建块格式化上下文的情况下裁剪内容？

回顾

visible（默认值）允许内容溢出。hidden 会裁剪内容并创建 BFC。scroll 始终显示滚动条。auto 仅在需要时显示滚动条（推荐）。clip 会裁剪内容但不创建 BFC。使用 overflow-x/y 分别控制每个轴。使用 scrollbar-gutter: stable 防止布局偏移。

常见问题解答

「overflow：hidden、scroll、auto、clip」课时是免费的吗？

是的 — 「overflow：hidden、scroll、auto、clip」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「overflow：hidden、scroll、auto、clip」这节课中我会学到什么？

使用 hidden、scroll、auto 和 clip 值控制溢出内容的处理方式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「overflow：hidden、scroll、auto、clip」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. overflow：hidden、scroll、auto、clip
  2. scroll-behavior：smooth
  3. scroll-snap-type 与 scroll-snap-align
  4. 使用 ::-webkit-scrollbar 设置滚动条样式
← 返回 CSS Academy