现代项目首选display: flex实现左固定右自适应，父容器设flex，左侧定宽，右侧flex: 1；需清除float、absolute等干扰样式，并加min-width: 0防溢出。
现代项目直接用 display: flex，别绕弯。 其他方案要么有结构性限制（比如 HTML 顺序必须左在前），要么兼容性差或维护成本高，flex 在 Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+ 都稳，IE 10–11 加个 -ms-flex: 1 也能跑。
用 display: flex 实现时右侧溢出或换行？
问题通常不是 flex 不起作用，而是干扰样式没清干净：
- 父容器不能有
float、position: absolute或display: inline-block—— 这些会破坏 flex 上下文 - 右侧元素默认会继承
min-width: auto，内容超长时可能撑破布局，加min-width: 0强制收缩 - 别给右侧再设
width: 100%，它和flex: 1冲突，会导致计算错误 - 左侧若内容过长，默认可能被压缩（
flex-shrink: 1），显式写flex-shrink: 0更可控
用 display: grid 为什么两列堆一起？
Grid 不像 Flex 那样“自动分配”，必须明确定义列轨道：
- 只写
display: grid不生效，必须配grid-template-columns: 200px 1fr - 误用
1fr 1fr或auto 1fr会让左侧也参与弹性缩放，失去“固定”语义 - 间隙用
gap: 16px，别靠margin—— grid item 的 margin 在某些浏览器里会被忽略或行为不一致 - 如果需要响应式，
grid-template-columns可配合@media或minmax()动态调整，但基础写法必须先写死两列结构
还在用 float + margin-left？注意这三点
这个方案看似简单，但实际线上容易翻车：
- HTML 结构强制要求左侧元素必须写在右侧前面，否则右侧
margin-left会失效 - 右侧元素高度低于左侧时，父容器不会自动撑高，得额外加
overflow: hidden或伪元素清除浮动 - 移动端缩放或字体放大后，
margin-left值是固定像素，可能错位；而flex和grid天然适配相对单位
真正麻烦的不是选哪种方案，而是混用——比如父容器用了 flex，子元素又加了 float，或者 grid 里嵌套了绝对定位。这类组合会让布局行为变得不可预测，尤其在内容动态加载或 resize 后。盯住一条主线：现代布局就用 flex 或 grid，其他方案只用于兜底或老系统迁移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
