最快方案是 display: flex，左栏 flex: 0 0 250px，右栏 flex: 1；grid 更语义化，用 grid-template-columns: 250px 1fr；calc() 易出错且不响应式；float 已过时，仅用于老系统维护。
直接用 display: flex 最快，且现代项目中无需妥协兼容性。
flex 布局：左固定右自适应的最小可行写法
核心就三行 CSS，不依赖顺序、不需清除浮动、不靠 calc() 算宽度：
- 父容器加
display: flex - 左栏用
flex: 0 0 250px（禁伸缩、禁收缩、定宽 250px） - 右栏用
flex: 1（自动填满剩余空间）
常见错误是只写 width: 250px —— 在 flex 容器里它可能被压缩；flex: 0 0 250px 才真正锁定宽度。右栏也不用设 width: calc(100% - 250px)，那只是给浏览器添乱。
grid 布局：语义最清晰、代码最少的替代方案
如果你明确不需要支持 IE 或旧 Edge（≤15），grid 更直观：
- 父容器设
display: grid和grid-template-columns: 250px 1fr - 子元素按 HTML 顺序自然排列，无需额外定位
- 别给子元素再写
width: 100%，会干扰轨道分配
1fr 不是百分比，而是“剩余空间的一份”；写成 250px auto 也可能让右栏撑不开，1fr 才可靠。注意：IE 完全不支持 grid，连前缀都没用。
calc() 为什么容易出错？
看似能写 width: calc(100% - 250px)，但实际极易失效：
- 空格必须严格：
calc(100% - 250px)✅，calc(100%-250px)❌ - 单位混用（如
50% + 1rem）在 IE11 中直接被忽略 - 嵌套容器中
100%指向的是当前包含块，不是视口或父容器，稍有padding或transform就算错 - 它只计算一次，菜单折叠后右侧不会自动重排，得靠 JS 动态改 CSS 变量才勉强可用
除非硬要兼容 IE11，否则别把它当主力方案——它不是“自适应”，只是“静态减法”。
float 方案现在只该用于修老系统
虽然 float: left + margin-left 能跑通 IE6，但代价太高：
- HTML 结构必须左栏写在右栏前面，违反语义直觉
-
overflow: hidden清浮动会意外裁剪box-shadow或position: absolute子元素 - 响应式切单列时，整套规则得推倒重写
- 右栏
margin-left必须 ≥ 左栏总宽（含border+padding），漏一点就重叠
新项目里看到 float: left，基本等于技术债预警。不是不能用，而是改起来会骂人。
真正容易被忽略的点是高度对齐：所有方案里，左栏都不会自动随右栏拉高。这不是 bug，是默认行为；若需要等高，得确认父容器没覆盖 align-items: stretch（它是 flex/grid 的默认值，但某些重置 CSS 会干掉它）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
