最简兼容方案是float+overflow：左浮动定宽，右触发BFC自适应；Flex需设min-width:0防撑破；calc()受限于父宽和单位统一；Grid要防隐式轨道，内容不定时须预设溢出策略。
用 float + overflow 实现最简兼容方案
IE8+ 都能跑，不依赖 Flex 或 Grid，适合老项目快速修复。核心思路是让右侧区域“感知不到”左侧浮动元素，靠 overflow: hidden 触发 BFC 来包裹自身内容。
- 左侧写
float: left; width: 200px;，必须设宽 - 右侧不设
float，但加overflow: hidden;（或auto），宽度自动填满剩余空间 - 注意：右侧若含
position: absolute子元素，可能被overflow: hidden截断，此时改用overflow: auto或换方案 - 常见错误是右侧也加了
float: right，结果两栏都脱离文档流，父容器塌陷——得额外清浮
display: flex 下的左右布局怎么防溢出
Flex 是目前最可控的方式，但右侧自适应区域内容过长时容易撑破容器或换行错乱。
- 父容器设
display: flex，左侧用flex: 0 0 200px（不缩放、不增长、定宽） - 右侧用
flex: 1，但必须加min-width: 0，否则内部文本或图片会强制撑宽，破坏自适应 - 如果右侧有
white-space: nowrap的长字符串，需配合text-overflow: ellipsis和overflow: hidden - IE10–11 对
flex: 1解析有偏差，建议显式写成flex: 1 1 0
为什么 calc(100% - 200px) 经常失效
看似直接，实则对祖先元素的定位和盒模型极度敏感，不是所有场景都能用。
- 只在父容器有明确宽度（非
max-content）、且左侧为固定像素宽时才稳定 - 若左侧用
em、rem或百分比，calc()里不能混用单位，否则无效 - 常见错误：父容器没设
box-sizing: border-box，而左右都有 padding/border，导致计算值与实际占用不符 - 嵌套多层时，每层父级都要检查是否触发了
min-width: auto（比如display: inline-flex）
Grid 布局中避免隐式轨道撑开容器
用 grid-template-columns: 200px 1fr 很干净，但一不留神就会因内容触发隐式网格线，让右侧变窄甚至换行。
立即学习“前端免费学习笔记（深入）”；
- 务必加
grid-auto-columns: 1fr，否则子项多于两列时，Grid 会按内容宽生成新列，破坏布局 - 右侧区域若含
table，默认table-layout: auto会撑宽整列——需手动设table-layout: fixed并配width: 100% - Firefox 对
1fr在小屏下的收缩行为更激进，可加minmax(0, 1fr)替代单纯1fr - 不要给右侧设
width: 100%，Grid 下 width 会被忽略，反而可能干扰对齐
真正麻烦的不是选哪种方案，而是右侧内容类型不确定时——比如用户可输入任意长度文本、插入图片或 iframe。这时候得提前约定容器的 min-width、max-width 和溢出策略，而不是只盯着布局本身。
