最直接现代方案是flex布局：父容器display: flex，左栏flex: 0 0 250px，右栏flex: 1并加word-break和min-width保护，高度对齐需确保align-items: stretch未被重置。
flex 布局实现左固定右自适应最直接
现代项目里，display: flex 是首选，代码少、逻辑清、兼容性好（IE10+）。关键不是“算宽度”，而是让右栏自动填满剩余空间。
- 父容器必须设
display: flex，漏掉这句整个布局就失效 - 左栏用
flex: 0 0 250px（不伸缩、不收缩、基础宽 250px），比单纯写width: 250px更稳，能防内容撑爆 - 右栏用
flex: 1，它会自动占满剩余空间；若需最小宽度保护，加min-width: 300px - 右栏内容含长英文或数字无空格时容易溢出，此时加
word-break: break-word或overflow-wrap: break-word - 高度默认不对齐——左栏不会随右栏拉高，除非父容器
align-items: stretch没被重置覆盖（它是默认值，但某些 CSS 重置会干掉）
grid 布局写法最语义化但需确认浏览器支持
display: grid 适合明确知道是“两列结构”的场景，一行定义列宽，不依赖子项顺序或伸缩规则。但它在 IE 中完全不可用，Edge ≤15 也不行。
- 父容器设
display: grid+grid-template-columns: 250px 1fr，其中1fr表示“剩余空间的 1 份”，不是百分比 - 别给子元素再设
width: 100%，grid 子项默认不继承父容器 width，双重要求会导致错位 - 想留间隙？用
gap: 1rem，它作用于网格线之间，不影响轨道尺寸；别用margin挤子元素，否则破坏计算逻辑 - 小屏适配可用
minmax(250px, 1fr)让左栏保最小宽，但注意极端窄屏下可能撑不开一列
calc() 不是自适应解法，只是静态计算
calc(100% - 250px) 看似简单，实则脆弱：它只做一次计算，不响应 DOM 变化、折叠/展开、padding 或嵌套容器干扰。
-
+和-两侧**必须有空格**：calc(100% - 250px)✅，calc(100%-250px)❌（浏览器当无效值，退回到 auto） -
*和/左右**禁止空格**：calc(100vw / 375 * 16)✅，中间多空格可能在旧 Chrome 或 Safari 中失败 - 嵌套容器中
100%始终相对于当前包含块，而transform、padding、position: absolute都可能打断它，导致右侧栏突然撑出父容器 - 若必须用
calc()（如兼容 IE11），把动态部分抽成 CSS 变量：width: calc(100% - var(--sidebar-width))，JS 控制折叠时只改这个变量
float + margin 方案仅用于强兼容需求
这是唯一能跑通 IE6 的方案，但现在新项目看到 float: left 基本等于技术债预警——不是不能用，而是改起来会骂人。
立即学习“前端免费学习笔记（深入）”；
- 左栏设
float: left+ 明确宽度（如width: 250px） - 右栏不浮动，但
margin-left必须 ≥ 左栏总宽度（含border+padding），否则文字会挤到左栏下方 - 父容器必须清除浮动，推荐伪元素法：
.container::after { content: ""; display: table; clear: both; }，比overflow: hidden更可控 - 所有方案里，左栏都不会自动随右栏拉高，这不是 bug，是 CSS 默认行为
实际选型时，别纠结“哪种更高级”，先看项目是否要兼容 IE —— 要，就用 flex；不要，grid 更干净；只有 legacy 场景才碰 float；calc() 单独用基本等于埋坑。
