流式布局关键在width、max-width和box-sizing三者闭环配合；漏掉任一环会导致溢出、换行错位或小屏滚动条。
流式布局不是“写了百分比就自动流起来”，关键在 width、max-width 和 box-sizing 三者配合是否闭环。漏掉任一环，都会出现溢出、换行错位、小屏滚动条等典型问题。
为什么 width: 100% 单独写没用
常见现象：给子元素写 width: 50%，但实际宽度没变；或者三列布局在小屏下突然换行。根本原因是百分比只对“有明确宽度的包含块”生效——如果父容器是 width: auto（比如默认的 div），那它的包含块就是视口，50% 就按屏幕宽度算，而不是你期望的父容器宽度。
- 必须确保父容器有可计算的宽度：显式设
width、max-width，或由 flex/grid 等上下文提供尺寸约束 -
float、inline-block容器容易因空白字符或默认vertical-align导致宽度计算偏差，调试时看 computed width 最可靠 - Flex 或 Grid 子项的包含块规则不同：flex item 的百分比宽高是相对于 flex container 的主轴/交叉轴尺寸，不是父元素 content box
max-width 不是锦上添花，而是流式底线
纯百分比会无限缩放，大屏下文字拉得太开、图片糊成一片。设计锚点（如 1200px）必须靠 max-width 锚住，否则流式就变成“失控缩放”。
- 典型写法：
.container { width: 100%; max-width: 1200px; margin: 0 auto; } - 不要在
max-width容器里嵌套固定宽子元素（如width: 960px），否则小屏必然横向滚动 -
max-width: 100%只在极少数场景有用（如模态框内层内容需防折叠屏裁切），它不解决大屏过宽问题，且仍受父级包含块限制 - IE11 不支持
max-width: min(1200px, 100%)，需降级为媒体查询
box-sizing: border-box 是流式不出错的硬门槛
默认 box-sizing: content-box 下，width: 100% + padding: 1rem 必然溢出——因为 padding 和 border 不计入 width。这不是 bug，是规范行为，但会让所有百分比布局失去可预测性。
- 全局重置风险高（影响第三方组件字体继承等），推荐局部启用：
.fluid-row { box-sizing: border-box; width: 100%; } - 三列等分布局中，
width: 33.33%+padding: 1rem若没设border-box，几乎一定换行 - CSS-in-JS 或 Tailwind 用户注意：
max-w-类通常不隐含width: 100%，得手动加w-full
响应式图片和多图排布不能只靠百分比
给 <img> 直接写 width: 100% 很危险：若父容器没设宽，图片可能按原始尺寸渲染并溢出；若图片本身很小，width: 100% 会强行拉伸模糊。
- 正确链路：图片父容器设
width: 100%→<img>设width: 100%; max-width: 100%; height: auto; - 多图并排优先用
display: grid或flex，避免float+ 百分比带来的跨浏览器换行差异 - CSS 响应只是缩放层面，真实项目必须配
srcset+sizes，否则手机仍下载桌面大图
真正难的不是写 width: 80%，而是每次写之前，心里清楚这个百分比的参照块到底是谁——右键检查元素，看 computed 标签页里的实际 width 值，比猜快十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
