最稳妥方案是float + margin，兼容IE6+：左列float:left+固定宽，右列仅设margin-left腾出空间，不依赖width计算或calc()，避免inline-block空隙及旧IE不支持问题。
直接用 float + margin 是最稳妥、兼容性最好（IE6+ 都能跑）的方案，比 inline-block 或 calc() 更可靠，尤其在老项目中。
float + margin 实现左定宽右自适应
这是老项目里最常被验证过的写法，核心是让左列脱离文档流，右列用 margin-left 腾出空间，不依赖宽度计算。
- 左列加
float: left和固定width（比如200px） - 右列不设
float，也不设width，只加margin-left: 200px - 父容器不需要
clearfix—— 只要右列高度 ≥ 左列，就能自然撑高父容器 - 如果右列内容少、高度不够，父容器会塌陷，这时才需要补
.clearfix::after
示例关键 CSS：
.left { float: left; width: 200px; }
.right { margin-left: 200px; }
为什么不用 inline-block + calc()？
inline-block 在 IE8 及以下有空隙问题（哪怕 font-size: 0 也难完全消除），而 calc(100% - 200px) 在 IE9 才开始支持，IE8 完全不认。老项目往往要保 IE8，所以这个组合实际不可靠。
-
calc()的减号两边必须有空格，写成calc(100%-200px)会直接失效 - 即使浏览器支持
calc()，它对百分比和像素混算的解析在旧版中偶有偏差 -
inline-block元素默认按基线对齐，容易引发意外交错或垂直偏移
绝对定位也能用，但得小心几个坑
父容器设 position: relative，左列 position: absolute; left: 0，右列 position: absolute; left: 200px; right: 0 —— 看似简洁，但实际限制多。
- 右列必须设
top值（比如top: 0），否则可能错位 - 两列都脱离文档流，父容器高度为 0，除非额外设高度或用 JS 补高
- 如果右列内容超长、需要内部滚动，
right: 0会导致横向溢出不可控 - 响应式时，
left: 200px不会随视口缩放自动调整，不如margin灵活
真正上线的老项目，别碰花哨技巧。float + margin 这一套，写清楚、测好 IE8/9/10，比任何“看起来更现代”的写法都省心——尤其是当维护者不是你的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
