流式布局失败主因是父容器缺宽度上下文、box-sizing未设为border-box、viewport meta缺失。父容器需有明确宽度来源，box-sizing应全局设为border-box，且必须添加viewport meta标签。
流式布局写不出来，八成不是百分比写错了，而是父容器没给宽度上下文、box-sizing没切到border-box，或者漏了<meta name="viewport">——这三样缺一不可。
父容器必须有明确宽度来源
子元素width: 50%永远按包含块的 content box 宽度算。如果父元素是div且没设width、max-width或没在 flex/grid 容器里，它的宽度就是auto（由内容撑开），那子元素的“50%”就毫无意义。
- ✅ 推荐做法：
.container { max-width: 1200px; width: 100%; margin: 0 auto; } - ✅ 或嵌套在
display: flex容器中，让父级提供弹性上下文 - ❌ 避免只写
body { width: 100%; }——它默认就是 100%，不解决中间层断链问题 - 用开发者工具看 computed
width：如果父级显示auto，那子级百分比基本已失效
box-sizing: border-box必须全局启用
默认box-sizing: content-box下，width: 33.33% + padding: 10px + border: 1px 实际占宽 = 33.33% + 22px，三列加起来必然超 100%，强制换行。
- ✅ 一劳永逸：
* { box-sizing: border-box; }（注意性能影响极小，现代浏览器优化良好） - ✅ 至少确保参与流式的容器和子项都显式声明
box-sizing: border-box - ❌ 不要依赖继承——
input、button等表单元素默认content-box，容易漏
viewport meta 标签不能少，尤其移动端
没有<meta name="viewport" content="width=device-width, initial-scale=1.0">，iOS Safari 和 Android Chrome 会按 980px 虚拟视口渲染，你的width: 80%全按 980px 算，跟真实屏幕对不上。
- ✅ 必须放在
最前面，且不能重复或拼错属性名 - ✅ 如果用
initial-scale=1但没配width=device-width，某些安卓 WebView 仍可能 fallback 到桌面模式 - ❌ 不要写
user-scalable=no来“防缩放”——它破坏可访问性，且和流式无关
高度百分比别硬刚，优先换思路
height: 50%在绝大多数场景下无效，因为父级高度默认是auto，而50% of auto是非法计算，直接退化为auto。
- ✅ 更可靠方案：
min-height: 100dvh（兼容 iOS Safari）、height: 100vh，或用display: flex+flex: 1 - ✅ 做正方形容器？用
padding-top: 100%+height: 0+ 绝对定位子元素，别试height: 100% - ❌ 不要逐层给
html, body { height: 100%; }——链太长，任意一级漏设就崩，维护成本高
真正卡住人的从来不是width: 100%写不写得出来，而是 computed width 查不到、box-sizing被重置、viewport 被忽略——这些地方一错，整个流式结构就浮在半空，看着像写了，其实没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
