CSS Overflow

当元素内容超出其宽高（内容区 + padding）时，多出来的部分怎么处理？overflow 就是用来控制：是否裁剪、是否显示滚动条、滚动条在哪条边等。

常用属性

• overflow：同时设置水平、垂直方向（可拆成 overflow-x、overflow-y）
• overflow-x：水平方向
• overflow-y：垂直方向

---

overflow 的取值

值	说明
visible	默认：不裁剪，内容可溢出到盒子外
hidden	裁剪溢出部分，不显示滚动条
scroll	裁剪溢出部分，始终显示滚动条（即使内容未溢出）
auto	有溢出时显示滚动条，无溢出时不显示（常用）
clip	类似 hidden，且禁止程序化滚动

---

基本用法

.box {
  width: 200px;
  height: 150px;
  overflow: auto;   /* 溢出时出现滚动条 */
}

.card {
  overflow: hidden; /* 超出部分直接裁掉 */
}

.sidebar {
  overflow-y: auto;  /* 只控制垂直方向滚动 */
  overflow-x: hidden;
}

---

常见场景

1. 固定高度区域可滚动

例如侧边栏、弹窗内容区：

.sidebar {
  height: 100vh;
  overflow-y: auto;
}

2. 隐藏溢出（圆角、单行省略等）

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

单行文字溢出省略通常配合 text-overflow: ellipsis 和 white-space: nowrap，父容器可设 overflow: hidden。

3. 水平滚动（如横向列表）

.horizontal-list {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

---

与 BFC、sticky 的关系

• 给元素设 overflow 不为 visible（如 hidden、auto）会创建新的 BFC，可用来清除浮动、防止 margin 合并等。
• 若父元素 overflow: hidden，其内部的 position: sticky 可能失效，需注意。

---

小结

• overflow 控制内容溢出时是否裁剪、是否出现滚动条。
• visible：不裁剪；hidden：裁剪无滚动条；scroll：总有滚动条；auto：需要时才显示（推荐）。
• 可分别用 overflow-x、overflow-y 控制水平、垂直。
• 固定高度 + overflow-y: auto 是「可滚动区域」的常见写法。

下一节学习 CSS Float（浮动）。