最稳妥的流式布局需同时设置百分比宽度、max-width和min-width，并配合box-sizing: border-box；浮动多列须严格控制百分比总和并清除浮动；column-count仅适用于纯文本，viewport meta标签必不可少。
百分比宽度 + max-width 是最稳妥的流式起点
直接用 width: 100% 很容易撑爆容器或导致文字过窄，真正可用的流式布局必须搭配 max-width 和 min-width 控制边界。只设百分比，等于把控制权完全交给浏览器缩放逻辑，结果不可控。
-
width: 100%保证占满父容器，但不防溢出 -
max-width: 1200px锁定桌面端最大舒适宽度，超出后留白而非拉伸 -
min-width: 320px防止小屏下元素挤压变形（尤其输入框、按钮） - 记得加
box-sizing: border-box，否则 padding 和 border 会额外加宽
float 实现多列时，百分比必须严格相加为 100%
用 float: left 做两栏或三栏流式布局，看似简单，但实际极易因四舍五入、border 或 margin 导致最后一列掉行——这不是 bug，是 CSS 浮动的固有行为。
- 两栏：左列
width: 69.9%，右列width: 30%（留 0.1% 容错） - 三栏均分：用
width: 33.333%，不要写33%，否则三列总和可能达 99% 或 100.001% - 必须清除浮动，否则父容器高度塌陷；推荐用
overflow: hidden或伪元素::after，别依赖clear: both插空 div - 移动端小屏下建议直接用媒体查询切回单列：
@media (max-width: 768px) { .column { width: 100%; float: none; } }
column-count / column-width 只适合正文类流式内容
看到「多列」就本能想用 column-count？先确认你排的是不是纯文本流。它对卡片、按钮、表单等块级结构完全无效，强行套用只会让布局错乱。
-
column-count: 3强制分 3 列，哪怕只有两段话，也会留出空白列 -
column-width: 16rem更实用：告诉浏览器“每列至少这么宽”，列数自动算，适合响应式 - 必须加
break-inside: avoid，否则标题或图片可能被硬生生截断在两列之间 - 移动端默认禁用分栏，用
@media (max-width: 480px) { column-count: 1; }显式重置
viewport meta 标签漏写会导致流式失效
所有 CSS 流式规则都依赖视口正确解析，如果没写或写错 <meta name="viewport" content="width=device-width, initial-scale=1.0">，手机浏览器会以桌面模式渲染，width: 100% 就变成“100% 的 980px”，根本不是你想要的“100% 屏幕宽”。
- 务必放在
最前面，且不能重复写 - 不要写
user-scalable=no，这会破坏用户缩放体验，也干扰辅助功能 - 某些老安卓 WebView 对
initial-scale=1.0解析不准，可补一句minimum-scale=1.0 - 测试时用真机或 Chrome DevTools 的 device mode，别只靠浏览器窗口缩放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
