兼容性最强的是 float + margin 方案，支持 IE6；现代项目首选 flex 布局，IE10+ 支持；grid 最简洁但仅限现代浏览器；absolute 定位因脱离文档流、维护难、可访问性差而不推荐。
用 float + margin 实现兼容性最强的两栏布局
这是最稳妥、浏览器兼容到 IE6 都能跑通的方案，核心是左侧用 float: left 固定宽度，右侧用 margin-left 腾出空间。关键不是“自适应”本身，而是避免右侧内容被浮动层遮盖。
- 左侧容器必须设置明确宽度（如
200px），且加float: left - 右侧容器不浮动，但
margin-left值必须 ≥ 左侧宽度，否则文字会挤到左边下面 - 父容器建议加
overflow: hidden或伪元素清除浮动，否则高度塌陷
右侧内容区
用 flex 实现真正语义化、响应式友好的两栏
现代项目首选，display: flex 让右侧自动占满剩余空间，无需计算 margin，也不存在清除浮动问题。但要注意 IE10+ 才完全支持，IE9 及以下不认。
- 父容器设
display: flex，子项默认水平排列 - 左侧设固定宽（如
width: 200px或flex: 0 0 200px） - 右侧设
flex: 1，表示“尽可能伸展”，它会自动填满剩余宽度 - 若右侧需最小宽度保护，可加
min-width: 300px
右侧内容区
用 grid 实现最简洁、未来感最强的写法
如果你只支持现代浏览器（Chrome 57+/Firefox 52+/Safari 10.1+），grid 是最直观的：直接定义两列，一列固定、一列自适应。比 flex 更适合二维布局场景。
- 父容器设
display: grid，用grid-template-columns定义列宽 -
200px 1fr表示：第一列固定 200px，第二列占剩余所有空间（1fr= 1 fraction） - 不需要给子元素额外定位，顺序即渲染顺序
- 注意：IE 完全不支持
grid，连实验性前缀都没用
右侧内容区
为什么不能只靠 position: absolute？
有人尝试用绝对定位把左侧固定、右侧用 left: 200px 拉过去，看似可行，但实际埋雷严重：
立即学习“前端免费学习笔记（深入）”；
- 绝对定位脱离文档流，右侧容器无法感知父容器高度，导致父容器高度为 0
- 右侧内容如果超出视口，滚动条可能失效或行为异常
- 响应式断点里改宽度时，
left值必须同步改，维护成本高 - SEO 和可访问性差，屏幕阅读器可能跳过绝对定位块
除非你明确控制整个视口且无滚动需求，否则别用这个思路。
