流式布局本质是用%、vw、em等相对单位替代px，使元素随容器缩放；需统一box-sizing: border-box、避免固定像素值、确保父容器有尺寸上下文，推荐CSS Grid（fr单位）或Flexbox（flex: 1 1 0%）实现，百分比高度须有明确父级高度参照。
流式布局的本质是用百分比替代固定像素
流式布局不是某种独立技术，而是指用 %、vw、em 等相对单位控制尺寸，让元素随容器缩放。核心在于：所有宽度（包括 width、padding、margin）都得脱离 px 依赖，否则一加固定值就断流。
常见错误现象：width: 50%; margin: 10px; —— 这个 10px 会撑破父容器，导致换行或横向滚动；又或者写了 box-sizing: content-box;（默认值），但没意识到 padding 和 border 会额外增加宽度。
- 必须统一设置
box-sizing: border-box;，否则百分比计算不包含内边距和边框 - 父容器自身不能是
width: auto且无明确尺寸上下文（比如未设width的div在文档流中会占满，但嵌套后容易意外收缩） - 慎用
float做流式分栏——它已过时，且清除浮动稍有疏忽就会塌陷
CSS Grid 实现三栏等宽流式布局最稳
比起浮动或 inline-block，grid 天然适配流式需求，写法简洁、行为可预测。关键在 grid-template-columns 中使用 fr 单位或百分比，而非硬编码像素。
使用场景：响应式后台仪表盘、卡片列表、多列表单。
立即学习“前端免费学习笔记（深入）”；
参数差异：1fr 1fr 1fr 表示三等份；2fr 1fr 1fr 是 50% / 25% / 25%；而 33.33% 33.33% 33.34% 看似合理，但浮点舍入可能导致最后一列换行。
性能影响：Grid 渲染效率高，现代浏览器兼容性良好（IE11 需加 -ms- 前缀，但仅支持部分语法）。
section {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
width: 100%;
}
Flexbox 分栏时注意 flex-basis 和 grow 的组合陷阱
flex 很适合一维流式布局，但新手常卡在 flex-basis 设为 0% 还是 33.33%。错选会导致内容撑开列宽，破坏等比效果。
常见错误现象：三列用了 flex: 1，但某列文字很长，整行被拉宽，其他列被压缩到最小内容宽。
- 要严格等比，请用
flex: 1 1 0%（即flex-grow: 1,flex-shrink: 1,flex-basis: 0%） - 避免写
flex: 1 1 auto或省略flex-basis，此时浏览器按内容宽度作为基准，流式失效 -
gap在 Flexbox 中 IE 完全不支持，需用margin模拟，但要注意第一项/最后一项的额外间距
百分比高度失效？那是因为父容器没给高度上下文
写 height: 50% 没反应，不是 CSS 错了，是祖先链里至少有一个父级没设 height（或 min-height）。百分比高度必须有明确参照物。
使用场景：全屏轮播图、侧边栏与主内容同高、卡片区域统一高度。
兼容性影响：IE9+ 支持百分比高度，但前提是父级有计算后的像素高度（height: 100vh 可行，height: 100% 则要看上一级是否也设了高度）。
- 最稳妥做法：从
html, body { height: 100%; }开始逐级向下设，或直接用vh单位 - Flexbox 容器中子项设
height: 100%通常有效，因为 flex 容器本身提供了主轴尺寸上下文 - 不要对
position: absolute元素单独设百分比高度却不给父级position: relative+ 显式高度
流式布局真正的复杂点不在写法，而在「嵌套层级中相对单位的参照对象是否清晰」。一个 % 是相对于谁算的，得一层层往上捋，而不是只看眼前这行代码。
