overflow 的工作方式与可见范围

CSS 溢出故障应先定位实际超出边界的元素，再决定修复方式。直接在多个祖先元素上连续添加 hidden，通常只能暂时消除视觉现象。

五种属性值分别适合什么场景

hidden 与 clip 🎆的区别在于交互能力和布局语义。hidden 常用于建立可裁切的容器，也可能形成滚动容器；clip 更强调禁止滚动的裁剪效果。需要保留但暂时不展示的长文本，不应仅依靠✨这两个值处理。

图片使用固定比例容器时，可以结合 object-fit 控制裁切方式。📌cover 会填满容器并裁掉💪部分画面，contain 会尽量完整显示图片但可能留下空白，实际选择应根据图片是否需要完整阅读决定。

Grid 子项出现溢出时，问题经常来自轨道的最小尺寸。使用一份占满剩余空间的列时，minmax(0, 1fr) 往往比单独使用 1fr 更能允许内容收缩，但仍需处理长文本和不可缩小控件。

使用溢出控制时需要保留的可访问性

CSS 内容溢出问题通常不是单纯把超出部分隐藏就能解决。页面需要根据内容是否必须完整阅读、是否允许用户横向操作、是否影响键盘访问和移动端布局，选择 visi🤔ble、hidden、cl📚ip、scroll 或 auto 等不同方案。

单独设置一个方向的处理方式时，浏览器会分别考虑横向和纵向边界。横向内容常见于长🌈链接、表格、代码行和图片，纵向内容常见于弹窗、下拉面板✨、聊天记录与文章摘要。

Flex 子项出现横向溢出时，常见原因是子项默认最小尺寸阻止了收缩。长单词🍀、不可换行文本、图片或固定宽度组件会迫使父容器变宽。