CSS的overflow属性用于控制容器内容溢出时的显示方式，包括hidden（裁剪）、auto（按需滚动）和scroll（强制滚动条），需配合尺寸设置与盒模型使用。
内容超出容器导致错位，本质是元素默认不处理溢出，CSS 的 overflow 属性就是专门解决这个问题的——它决定容器内内容“多出来时怎么办”。
overflow: hidden —— 简单粗暴地裁掉多余内容
这是最常用的兜底方案。只要内容宽度或高度超过容器，超出部分直接被“砍掉”，不显示也不滚动。
- 适合卡片、头像、文字摘要等对溢出容忍度高、不需要用户查看全部内容的场景
- 注意：它会同时隐藏横向和纵向溢出，如果只希望隐藏某一个方向，需配合 overflow-x 或 overflow-y
- 常见误用：给 flex 容器设了
overflow: hidden却发现子项换行失效——因为 flex 默认不换行，而 hidden 不会触发重排，要先加flex-wrap: wrap
overflow: auto —— 有需要才出现滚动条
浏览器自动判断：内容溢出时才显示滚动条（横向/纵向），不溢出时完全不显示，界面更干净。
- 比
scroll更友好，避免永远显示空滚动条的干扰 - 在移动端要注意：iOS Safari 对
auto的触控滚动支持较好，但某些嵌套滚动区域可能需加-webkit-overflow-scrolling: touch（旧版）或确保父容器有明确高度 - 小技巧：配合
max-height使用，可让长列表在固定区域内滚动，比如下拉菜单、日志面板
overflow: scroll —— 强制显示滚动条（含占位）
无论内容是否溢出，都预留滚动条空间（即使不可用），布局更稳定，避免内容因滚动条出现而突然右移。
立即学习“前端免费学习笔记（深入）”；
- 适合对布局一致性要求高的后台系统或表单页面
- 缺点：在不需要滚动时也占空间，视觉略显冗余
- 可单独控制：如
overflow-y: scroll; overflow-x: hidden实现仅纵向滚动 + 横向严格截断
别忘了配合尺寸与盒模型
overflow 不是万能胶水。如果容器本身宽高没设好，或者子元素用了 white-space: nowrap、浮动、绝对定位等打破常规流的写法，单靠 overflow 很难治本。
- 检查容器是否有明确的
width/max-width和height/max-height - 文字溢出常用组合：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - Flex/Grid 布局中，子项默认不收缩，记得设
min-width: 0或overflow: hidden防止撑破父容器
基本上就这些。overflow 是个看似简单、但用对了能立刻稳住布局的小开关。
