现代项目首选 flex 布局：左侧 sidebar 设 width 和 flex-shrink: 0，右侧 main 用 flex: 1，父容器 display: flex，并统一 box-sizing: border-box 防宽度溢出。
用 display: flex 实现左侧固定、右侧自适应最省心
现代项目首选，兼容性已覆盖所有主流浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+），写法简洁、语义清晰、响应式友好。
关键不是“怎么写”，而是「别漏掉 box-sizing: border-box 和 flex-shrink: 0」——否则右侧内容多时会把左侧挤变形，或者边框/内边距导致宽度计算溢出。
-
.sidebar设固定宽（如width: 240px），再加flex-shrink: 0防缩容 -
.main用flex: 1（等价于flex: 1 1 0），自动填满剩余空间 - 父容器必须设
display: flex，且避免给子项设width: 100%——这会和flex冲突 - 若 sidebar 有 border 或 padding，务必加
box-sizing: border-box，否则实际宽度 = width + padding + border
.container { display: flex; }
.sidebar { width: 240px; flex-shrink: 0; box-sizing: border-box; }
.main { flex: 1; box-sizing: border-box; }
用 display: grid 控制列宽更精确，适合复杂嵌套
当你需要明确指定左右比例（比如 25% / 75%）、留间隙、或后续要加第三栏时，grid 比 flex 更直接。
注意：不要用 grid-template-columns: 240px 1fr 就完事——如果右侧内容高度远超左侧，又没设 align-items: start，默认会垂直居中，造成视觉错位。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
grid-template-columns: 240px 1fr是最简写法，1fr表示“剩余空间均分” - 加
gap: 16px替代手动 margin，更可控；但 gap 不影响子项的box-sizing - 若左右内容高度不一致，加
align-items: start防止右侧上浮 - IE11 不支持
fr单位，需回退为grid-template-columns: 240px calc(100% - 240px)（但此时不响应窗口缩放）
.container {
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
align-items: start;
}
float + overflow: hidden 还能用，但只推荐老项目维护
这种写法在 IE6–8 里能跑，但现在唯一优势是「不用改 HTML 结构」——如果你接手的是十多年前写的后台页面，且不能动 DOM 顺序，它仍是最快 fallback 方案。
致命坑在于：一旦右侧内容触发了 min-height 或含 position: absolute 元素，overflow: hidden 会把它裁掉，而且调试时很难定位。
-
.sidebar必须float: left+ 显式width -
.main只需overflow: hidden（触发 BFC），**不要**加width或margin-left - 如果右侧有浮动子元素，得在它内部也清浮动，否则父容器高度塌陷
- 移动端 viewport 缩放时，
overflow: hidden可能导致横向滚动条意外消失
别碰 calc() + inline-block 这套组合
网上很多教程还在推 vertical-align: top + font-size: 0 消空格 + width: calc(100% - 260px)，实际项目里问题密集：
- 空格消除不可靠：换行符、tab、注释都可能引入不可见字符，导致右侧换行
-
calc()里的数值单位必须严格匹配（240px不能写成240），且不支持百分比嵌套 -
inline-block元素默认 baseline 对齐，哪怕写了vertical-align: top，字体渲染差异仍可能让两栏顶部像素级错位 - 任何一行加了
line-height或font-size，整个布局就偏移——调试成本远高于重写成flex
除非你被锁定在必须支持 IE7 的政府内网系统，否则这条路径建议直接跳过。
