溢出处理：overflow - CSS 教程

讲解

内容超出盒子的现象叫「溢出」：定高的盒子里文字太多、定宽容器里塞了张大图、长 URL 没有断行点。overflow 属性控制溢出部分的去向：visible（默认，溢出内容直接画在盒子外面）；hidden（裁掉超出的部分）；scroll（永远显示滚动条）；auto（只在溢出时出现滚动条，最常用）；clip（类似 hidden 但禁止一切滚动）。可以分方向写 overflow-x、overflow-y，注意一个方向的值不是 visible 时，另一个方向的 visible 会被强制按 auto 计算——这常导致「只想要 x 隐藏，y 方向却冒出了滚动条」。

overflow 有几个容易忽视的连带效应。其一，overflow 非 visible 的元素会成为「滚动容器」，position: sticky 的参考滚动区会变成它——祖先链上一个无心的 overflow: hidden 就能让 sticky 失效。其二，overflow: hidden/auto 会创建「块级格式化上下文」（BFC），老教程用它清除浮动、切断 margin 折叠，现代布局（Flex/Grid）里这些用法大多已退役。其三，hidden 会把超出盒子的 box-shadow、outline、下拉菜单一起裁掉，卡片悬浮阴影被父容器切掉一半，元凶就是它。

文本溢出有两个专门属性配合：text-overflow: ellipsis（省略号，前面排版章讲过）和 line-clamp 系列。滚动体验相关的还有 overscroll-behavior: contain（阻止滚动穿透到页面）、scroll-behavior: smooth（平滑滚动，锚点跳转常用）。自定义滚动条样式（::-webkit-scrollbar、scrollbar-width/color）可以做，但克制使用——用户对自己操作系统的滚动条有肌肉记忆。

示例

/* 定高卡片内容过多：内部滚动 */
.card-body {
  max-height: 200px;
  overflow-y: auto; /* 只在需要时出现纵向滚动条 */
}

/* 裁剪溢出：圆角图片容器 */
.cover {
  border-radius: 12px;
  overflow: hidden;
}

/* 长 URL 不撑破容器：配合断词 */
.url-text {
  overflow-wrap: break-word;
  overflow: hidden;
}

/* 模态框打开时锁定背景滚动 + 防止滚动穿透 */
body.modal-open {
  overflow: hidden;
}
.modal-panel {
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain; /* 面板滚到底不再带动页面 */
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

常见坑

overflow: hidden 裁掉阴影和弹层：卡片 hover 阴影被父容器切平、下拉菜单显示不全，都是祖先的 overflow 裁剪。阴影场景给容器加 padding 腾出空间，弹层场景改挂到 body 下。
sticky 莫名失效：祖先链上的 overflow: hidden/auto/scroll 把它变成了滚动容器，sticky 相对错了对象。要么去掉该 overflow，要么调整 DOM 层级。
scroll 与 auto 不分：scroll 无论是否溢出都显示滚动条占位（Windows 上尤其难看），日常几乎都用 auto。
单方向设置引发另一方向异常：overflow-x: hidden 会让 overflow-y 的 visible 失效（按 auto 计算）。两个方向需求冲突时，改用 overflow: clip 或调整结构。
用 overflow: hidden 当布局工具：老教程里「清除浮动」的用法在 Flex/Grid 时代已无必要，滥用只会引入裁剪副作用。

小结

overflow 控制溢出：auto 滚动、hidden 裁剪、visible 默认；它会创建滚动容器和 BFC，进而影响 sticky、阴影与弹层。下一章进入现代布局的主角：Flexbox。