流式布局核心是用百分比等相对单位替代固定像素，使元素宽度随容器或屏幕变化；需按“目标宽÷容器宽”计算百分比，配合max-width、flex/grid、rem/vw和媒体查询实现响应式适配。
直接把固定像素值换成相对单位，核心是让宽度“跟着容器或屏幕变”，而不是锁死一个数。
把 px 宽度换成百分比
固定布局常用 width: 960px 这类写法，流式布局则改用百分比。关键不是随便填个数，而是按公式算：目标元素宽度 ÷ 上下文容器宽度 = 百分比。比如父容器宽 1000px，侧边栏要占 300px，就写 width: 30%（300 ÷ 1000 = 0.3）。
- 容器本身也建议用百分比，例如
.container { width: 90%; max-width: 1200px; margin: 0 auto; }，既流动又有上限 - 避免对 body 或 html 直接设固定宽，否则会卡死整个流式基础
- 图片、表单控件等内联元素，加上
max-width: 100%; height: auto;防止溢出
用 flex 或 grid 替代浮动和绝对定位
老式流式常靠 float + clear 搭配百分比，现在更推荐现代布局方式，它们天然支持弹性伸缩：
- flex 容器中子项设
flex: 0 0 30%或flex: 1，能自动均分或按比例分配空间 - grid 布局用
grid-template-columns: 30% 70%或更灵活的1fr 2fr，语义清晰且响应友好 - 彻底放弃
position: absolute控制整体结构，它会脱离文档流，破坏流式逻辑
注意高度和字体不能只靠百分比
流式主要解决水平方向适配，高度和文字大小容易被忽略：
- 高度尽量不设固定值，用
min-height或依赖内容撑开；必须限定时可用vh（视口高度单位） - 字体大小别全用
px，可结合rem+ 动态设置根字号，或用clamp(1rem, 2.5vw, 1.5rem)实现平滑缩放 - 行高、内边距等间距类属性，优先用
em、rem或视口单位（如1.5vw），避免在大屏上显得过紧或过松
搭配媒体查询做断点微调
纯流式在极端尺寸下可能失衡，比如小屏上 30%/70% 的两栏挤成一条细缝，大屏上又拉得太开。这时用媒体查询收口：
- 在
768px下改为单列：给主内容加width: 100%; float: none; - 在
1200px上限制最大宽度，防止单栏过宽影响阅读体验 - 断点数量不宜多，通常 2–3 个关键尺寸（如手机、平板、桌面）足够，重点调结构，不逐个像素抠
