结论是用display: flex，左栏flex: 0 0 250px，右栏flex: 1最稳妥；因float+margin需手动清浮、语义混乱、易溢出且响应式维护成本高；flex: 0 0 250px明确禁缩放并须配box-sizing: border-box；右栏flex: 1天然响应式，无需calc；grid虽简洁但ie不支持且默认等高易错位。
直接说结论：用 display: flex，左栏写 flex: 0 0 250px，右栏写 flex: 1，这是当前最稳妥、兼容性好、不易出错的方案。
为什么不用 float + margin-left？
看似简单，但实际踩坑多：
- 必须手动清除浮动，
overflow: hidden会意外裁剪box-shadow或position: absolute子元素 - HTML 中左栏必须写在右栏前面，语义混乱；右栏内容若含长英文无空格，会直接溢出容器
- 响应式切单列时，整套
float和margin规则得全重写，维护成本高 - 左右栏高度不一致时，背景色无法自然对齐——这不是 bug，是 float 本身不提供等高机制
flex: 0 0 250px 比 width: 250px 更可靠
只写 width: 250px 在 flex 容器里是危险的：一旦右侧内容变多、父容器变窄，左栏可能被压缩（尤其含 padding 或 border 时），实际宽度超出预期。
根本原因是 flex-shrink: 1 默认开启。正确做法是：
- 用
flex: 0 0 250px—— 明确禁用伸展、禁用收缩、基础宽固定 - 必须配合
box-sizing: border-box，否则padding和border会额外撑宽 - 别单独设
flex-shrink: 0，容易漏掉flex-grow: 0，不如一条flex声明干净
右栏用 flex: 1 就够了，别碰 calc()
width: calc(100% - 250px) 看似直观，但问题不少：
-
calc(100% - 250px)中的空格必须严格：+ 和 - 两侧要有空格，* 和 / 两侧禁止空格 - 嵌套容器中，
100%总是相对于当前包含块，而padding、transform或position: absolute都可能打断它，导致计算错位 - 它只做一次静态计算，不响应 DOM 变化（比如菜单折叠/展开后，右栏不会自动重算宽度）
- 真正需要自适应时，
flex: 1才是动态响应的解法，完全无需calc
grid 虽简洁，但有两个硬限制
写法是 grid-template-columns: 250px 1fr，语义清晰，但要注意：
- IE 完全不支持，Edge ≤15 也不行；若需兼容 IE10+，只能降级为 flex 方案
- 默认
align-items: stretch会让左右栏等高——右栏内容少时，左栏会被拉长，视觉上像“上浮”，需加align-items: start修正 - 千万别给子项再设
width: 100%，这会和 grid 轨道冲突，引发横向滚动或错位 - 加间隙统一用
gap: 1rem，别用margin，否则破坏轨道计算
最容易被忽略的是高度对齐问题：所有方案里，左栏都不会自动随右栏拉高。这不是 bug，是 CSS 默认行为——想等高，得确认父容器没覆盖掉 align-items: stretch（它是 flex 和 grid 的默认值，但某些重置 CSS 会干掉它）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
