CSS 布局稳定性的细节

CSS 布局最容易出现的问题不是一开始写不出来，而是上线后遇到真实数据就变形。标题变长、按钮文案变多、图片加载失败、列表为空、浏览器宽度变化，这些都会暴露布局是否稳定。一个页面如果只靠当前样例数据调出来，很难长期可靠。

一、固定格式元素要有稳定尺寸

头像、图标按钮、表格列、卡片封面、工具栏按钮这类元素，应该有明确的宽高、比例或最小尺寸。否则加载态、hover 态、图标替换、数字变化都可能造成跳动。比如图片卡片最好使用 aspect-ratio，按钮组最好限制高度和间距，计数器最好预留数字增长空间。

二、溢出要提前设计

文本一定会变长，尤其是用户输入、接口返回和多语言场景。单行截断、多行截断、自动换行、缩小字号、允许横向滚动，各有适用场景。关键是不能等溢出后再补救。标题可以多行，按钮文案应该尽量短，表格字段要决定是换行还是截断。

三、父容器的 overflow 要慎用

overflow: hidden 很常见，但它可能裁剪下拉菜单、气泡提示、浮层和阴影。写定位元素时，要检查它的祖先容器有没有 overflow 限制。如果浮层需要跳出当前区域，可能要使用更高层容器或 Teleport，而不是在被裁剪的容器里硬调 z-index。

• 固定格式 UI 使用明确尺寸、比例或网格轨道。
• 动态文本提前定义换行和截断策略。
• 图片加载前后都要保留空间，避免布局跳动。
• 定位元素要检查祖先容器的 overflow 和 stacking context。

稳定布局看起来不显眼，但它决定了页面在真实世界里的可靠程度。越是业务页面，越要把动态内容当作默认情况来设计。