flex: 0 0 250px 比 width: 250px 更可靠，因其明确禁用伸缩、固定基础宽度，并需配合 box-sizing: border-box；右栏用 flex: 1 即可，无需 calc 计算；grid 虽简洁但 ie 不支持且默认等高易致视觉错位。
flex: 0 0 250px 比 width: 250px 更可靠
只写 width: 250px 在 flex 容器里是危险的：一旦右侧内容变多、父容器变窄，左侧可能被压缩（尤其含 padding 或 border 时），实际宽度会超出预期。根本原因是 flex-shrink: 1 默认开启。
正确做法是用 flex: 0 0 250px —— 明确禁用收缩、禁用伸展、基础宽固定。这比单独设 width + flex-shrink: 0 更简洁且不易漏。
-
flex: 0 0 250px等价于flex-grow: 0; flex-shrink: 0; flex-basis: 250px - 必须配合
box-sizing: border-box，否则padding和border会额外撑宽 - 右栏用
flex: 1即可，无需width: calc(100% - 250px)这类易错计算
grid-template-columns: 250px 1fr 的坑在 IE 和 align-items
grid 写法最干净，但有两个硬限制：IE 完全不支持，Edge ≤15 也不行；另外，默认 align-items: stretch 会让左右栏等高——看起来“对齐”，但若右栏内容少，左栏会被拉长，视觉上反而像“上浮”。
常见错误是给子项再加 width: 100%，这会和 grid 轨道冲突，导致错位或横向滚动。
- 小屏适配别硬套
minmax(250px, 1fr) 1fr，手机上可能撑不开两列，需配合@media切单列 - 加间隙统一用
gap: 1rem，别用margin，否则破坏轨道计算 - 若右栏高度远低于左栏，加
align-items: start防止默认垂直居中造成错位
float + margin-left 现在只适合修老系统
它能跑通 IE6，但现代项目里每用一次，协作成本就涨一分：HTML 中左栏必须写在右栏前面，违反语义化直觉；overflow: hidden 清浮动会意外裁剪 box-shadow 或 position: absolute 子元素；响应式切单列时规则得全重写。
最常被忽略的是高度不对齐问题——左右栏背景色无法自然对齐，因为它们不在同一 BFC 里，强行等高得靠 JS 或复杂 BFC 嵌套，不稳定。
- 右栏
margin-left必须 ≥ 左栏总宽度（含border+padding） - 清除浮动推荐伪元素法：
.container::after { content: ""; display: table; clear: both; }，比overflow: hidden更可控 - 新项目看到
float: left，基本等于技术债预警，不是不能用，而是改起来会骂人
所有方案里，左栏都不会自动随右栏拉高
这不是 bug，是 CSS 默认行为：只有 flex 的 align-items: stretch（默认值）和 grid 的 align-items: stretch 才会让子项拉伸填满容器高度。但很多 CSS 重置库（如 normalize.css 或某些 UI 框架）会覆盖这个默认值，导致左栏“塌陷”。
最容易被忽略的点是：你写了 display: flex，也写了 flex: 0 0 250px，但忘了检查父容器是否被其他样式重置了 align-items。
- 调试时直接在浏览器开发者工具里查父容器的 computed
align-items值 - 保险起见可显式写
align-items: stretch，哪怕它是默认值 - 如果用 float，等高只能靠 JS 监听高度或额外包裹一层 BFC 容器，不推荐
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
