现代项目首选display: flex实现左固定右自适应，左侧用flex: 0 0 250px锁定宽度，右侧用flex: 1占满剩余空间，需配合box-sizing: border-box和align-items: stretch确保等高与防溢出。
现代项目里，display: flex 是左侧固定、右侧自适应最稳的解法，不是“能用”，而是“改起来不翻车”。其他方案要么兼容成本高，要么语义混乱、响应式难收场。
用 display: flex 实现时必须加 flex-shrink: 0 和 box-sizing: border-box
只写 .sidebar { width: 250px; } 看似简单，但一旦右侧内容多、父容器窄，左侧会被压缩变形——尤其当它有 padding 或 border 时，宽度计算就溢出。正确写法是：
-
.sidebar { flex: 0 0 250px; }—— 明确禁用伸缩（flex-shrink: 0），比单写width更可靠 -
.main { flex: 1; }—— 自动占满剩余空间，不用算calc(100% - 250px) - 整个容器加
box-sizing: border-box，避免内边距/边框把宽度撑破
display: grid 写法极简，但 IE 完全不认
如果你的项目明确不支持 IE（包括 Edge ≤15），grid 是最干净的：一行定义列宽，不依赖子项顺序，也不用担心浮动清除或 BFC 触发逻辑。
.container { display: grid; grid-template-columns: 250px 1fr; }- 别给子元素再设
width: 100%，它会和 grid 轨道冲突，导致错位 - 加间隙用
gap: 1rem，别用margin挤子项，否则破坏轨道计算 - 小屏适配可换用
grid-template-columns: minmax(250px, 1fr) 1fr，但注意手机上可能撑不开两列
float + margin-left 方案现在只适合维护老系统
它兼容 IE6，但协作成本太高：必须手动清除浮动，overflow: hidden 会意外裁剪 box-shadow 或 position: absolute 子元素；左右栏高度不一致时，背景色无法对齐；切响应式单列时规则得全重写。
- 左侧必须
float: left; width: 200px; - 右侧必须
margin-left: 200px;（不能少于左侧宽度） - HTML 中左侧元素必须写在右侧之前，否则布局崩——这和语义化 HTML 的结构习惯直接冲突
- 现代项目里出现
float: left，基本等于技术债预警
最容易被忽略的点是：所有方案中，左栏默认都不会随右栏拉高。如果需要等高，得确认父容器没覆盖掉 align-items: stretch（它是 flex 的默认值，但某些 CSS 重置库会干掉它）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
