流式布局需配合百分比、max-width与min-width才能适配多屏；纯width: 100%因盒模型、内容宽度及可读性问题无法直接使用，须用box-sizing: border-box、max-width: 75ch或960px、min-width: 320px，并规避子元素宽度陷阱与图片文字溢出。
流式布局不是“写完就跑”的方案，它依赖百分比和max-width/min-width的配合才能真正适配不同屏幕；直接写width: 100%往往导致移动端文字挤成一团或桌面端留白过大。
为什么width: 100%不能直接当流式用
纯width: 100%会让元素无条件撑满父容器，但没考虑内容本身宽度、字体大小、内边距等实际占用空间。比如一个<div>设了<code>width: 100%又加了padding: 20px，实际宽度会超出父容器（盒模型默认是 content-box）。
- 必须搭配
box-sizing: border-box，否则 padding 和 border 都会额外增加宽度 - 文字在小屏上会因容器过窄而频繁换行，阅读体验差，需用
min-width保底 - 大屏下若不限制最大宽度，段落会拉得过长（超过 60ch），影响可读性
max-width和min-width怎么配才不翻车
这两个值不是凭感觉写的，而是基于典型设备视口和阅读舒适区反推出来的：
-
max-width: 960px：兼顾 1024px 宽屏和移动端缩放，是多数 CMS 和设计系统的默认断点 -
min-width: 320px：覆盖 iPhone SE 等最小主流屏幕，再小就该切响应式断点了 - 更稳妥的做法是用
max-width: 75ch代替像素值——按字符宽度控制，对字体缩放更友好
流式容器里子元素的宽度陷阱
常见错误是给子项也写width: 50%，结果因为 margin/padding/border 导致换行或溢出。
立即学习“前端免费学习笔记（深入）”；
- 避免在浮动或 inline-block 子元素上直接设百分比宽度 + 外边距；改用
calc(50% - 10px)或 flex 布局 - 如果必须用 float，记得给父容器加
overflow: hidden触发 BFC，防止高度塌陷 - 用
display: inline-block时，元素间空格会被渲染成空白符，导致总宽度超 100%，要么删 HTML 换行，要么设font-size: 0再重置子元素字体
流式布局中图片和文字的实际处理
图片默认不随容器缩放，文字也不会自动换行优化，这两处最容易暴露流式缺陷。
- 图片必须加
max-width: 100%; height: auto;，否则会撑破容器 - 长段落建议加
hyphens: auto;（配合lang属性）和word-break: break-word;防单词溢出 - 导航栏用流式时，别只靠
width: 20%分列；应结合flex-wrap: wrap或媒体查询 fallback
流式布局真正的难点不在代码长度，而在每个%值背后都要问一句：“这个比例在 320px 和 1440px 下是否都合理？”——没做这层验证，就只是写了看起来像流式的代码。
