流式布局核心是用百分比等相对单位替代固定像素，使元素宽度随容器或屏幕变化；需按“目标宽÷容器宽”计算百分比，配合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 搭配百分比，现在更推荐现代布局方式，它们天然支持弹性伸缩：

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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 个关键尺寸（如手机、平板、桌面）足够，重点调结构，不逐个像素抠