流式两栏布局必须用百分比或flex，禁用固定像素宽度；核心是容器动态缩放、内容防溢出（max-width:100%、overflow-wrap）、断点堆叠（@media(max-width:767px)），并兼顾ie11等兼容性。
流式两栏布局必须用百分比或flex，不能写死px
固定像素宽度（比如 width: 300px）会让左栏在小屏上撑出滚动条，右栏被挤到下一行——这不是流式，是“卡死”。真正流式要求左右两栏宽度随容器动态缩放，核心就两条：width 改成百分比，或直接用 display: flex。
常见错误是只改了外层容器宽度，但子栏仍用 px；或者用了 % 却没处理 padding 和 border 导致总宽超 100% 换行。
- 推荐写法：
.left { width: 70%; }+.right { width: 30%; }，并加box-sizing: border-box - 更稳写法：用
display: flex，.left { flex: 7; }+.right { flex: 3; }，自动按比例分配剩余空间 - 千万别漏：
float: left后必须清浮动，否则父容器高度塌陷；flex则不用
移动端小屏下两栏必须堆叠，靠媒体查询触发
流式 ≠ 一直横排。768px 以下屏幕宽度不够，强行并排会挤压文字、按钮变形。必须用媒体查询把两栏改成垂直堆叠——这不是可选优化，是实际体验底线。
断点别写 @media (max-width: 480px) 这种过时值，现在主流手机竖屏最小视口是 360px，平板横屏起始约 768px，建议用 @media (max-width: 767px) 作为切换临界点。
- 堆叠时去掉
float或flex-direction改为column - 堆叠后给
.left和.right加width: 100%，避免残留浮动影响 - 如果用了
flex，一句flex-direction: column就够，不用重写结构
图片和文字内容会撑破流式容器，得单独约束
就算两栏本身宽度自适应，里面一张 width: 500px 的图或一长串无空格英文，照样让整栏溢出、破坏布局。流式布局的“流”，只管容器宽度，不管内部内容是否守规矩。
最常被忽略的是图片：不设 max-width: 100%，它就按原始尺寸渲染；文字里没有 word-break: break-word，长链接或 token 直接撑破右栏。
-
img { max-width: 100%; height: auto; }是硬性要求，不是建议 - 对可能超长的文本容器（如
.content），加overflow-wrap: break-word - 避免在流式栏里用
white-space: nowrap，除非你明确知道不会溢出
Flex 实现比 float 更可靠，但老浏览器兼容性要兜底
display: flex 写两栏确实简单：flex: 7 和 flex: 3 自动等比，换行、对齐、居中都一行搞定。但它在 IE10 及以下基本不可用——如果你的项目还要支持旧政企系统，就得准备 fallback。
别用 JavaScript 动态计算宽度来模拟 flex，太重且易错。稳妥做法是 CSS 层级降级：先写 flex 布局，再用 @supports not (display: flex) 包一层 float 方案。
- IE11 支持 flex，但不支持
flex: 0 0 70%这种简写，得拆成flex-grow/flex-shrink/flex-basis - 真要兼容 IE9，只能退回
float+ 百分比 +overflow: hidden清浮动的老套路 - 现代项目（2026 年）基本可默认支持 flex，但上线前务必用真实设备测下 iOS Safari 15+ 和 Android Chrome
流式两栏看着简单，真正跑通要同时控制三层：容器宽度逻辑、内容溢出边界、跨设备断点行为。少盯住其中一层，上线后就会在某个机型上突然崩掉一栏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
