现代项目首选display: flex实现两栏自适应，左侧用flex: 0 0 200px锁定宽度，右侧用flex: 1自动填满剩余空间；calc()仅静态计算、不响应dom变化、嵌套易失效，不应作为主方案。
直接说结论：现代项目用 display: flex，兼容 IE9 以下才考虑 float + margin-left，别再用 calc() 硬算宽度——它不响应 DOM 变化，一嵌套就失效。
flex 实现两栏自适应最稳，但要注意 IE 支持边界
父容器设 display: flex，左侧固定宽（flex: 0 0 200px），右侧用 flex: 1 自动填满剩余空间。这个组合不依赖清除浮动、不卡高度塌陷、也不怕内容撑高不齐。
-
flex: 0 0 200px比单纯写width: 200px更可靠——它禁用伸缩，避免被flex: 1挤压 - 右侧若需最小宽度保护，加
min-width: 300px，否则窄屏下可能压缩到文字换行异常 - IE10–IE11 需加
-ms-flex前缀，但 IE9 及以下完全不识别，此时必须降级方案 - 如果父容器有
padding，flex: 1默认会撑满含内边距的区域；如需避开 padding，给右侧加margin: 0
float + margin-left 还能用，但必须同步处理三个细节
左侧 float: left + 固定宽，右侧靠 margin-left 让位——这是唯一能跑通 IE6 的方案，但稍一疏忽就会文字叠在左边上面。
- 右侧
margin-left值必须 ≥ 左侧总宽度（含border和padding），比如左侧是width: 200px; padding: 10px; border: 2px solid #000，那右侧至少要margin-left: 224px - 父容器必须清除浮动，推荐伪元素法：
.container::after { content: ""; display: table; clear: both; }，比overflow: hidden更可控，尤其当内部有position: absolute元素时 - 左侧不能只写
float: left就完事——没width，它会按内容宽度浮动，右侧让位就错乱 - 这种布局下，左右栏高度不同是正常现象；想拉齐高度？只有
flex或grid的align-items: stretch才能做到
calc() 看似灵活，实则极易踩坑
width: calc(100% - 200px) 在简单平级结构里能跑通，但只要嵌套一层、加个 transform 或 padding，100% 就指向错误的包含块，结果就是右侧溢出或塌缩。
-
calc()中+和-两侧必须有空格，*和/两侧禁止空格，写成calc(100%-200px)直接被浏览器忽略 - 嵌套容器中，100% 指向的是**最近的定位上下文或包含块**，不是视口，也不是最外层
.container - 如果左侧宽度会动态变化（比如菜单折叠），
calc()完全无感——它只计算一次，得靠 JS 改 CSS 变量才能联动 - 真正需要响应式适配时，优先用
flex: 1或grid-template-columns: 200px 1fr，calc()只适合兜底兼容 IE11 的静态场景
最容易被忽略的点是：所有方案里，左右栏默认都不等高。如果你看到“右侧内容把左侧菜单顶高了”，这不是 bug，是 CSS 正常行为——只有 flex 和 grid 默认拉伸子项，float 和 absolute 天然脱离文档流，高度各自为政。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
