float + overflow: hidden 能实现左侧定宽、右侧自适应，但仅限于老项目兜底或需兼容 ie9 及以上——它不是 bug 修复，而是靠触发 bfc 让右侧“自动避让”浮动区域；现代项目应优先使用 display: flex 或 display: grid。
直接说结论：float + overflow: hidden 能实现左侧定宽、右侧自适应，但仅限于老项目兜底或需兼容 IE9 及以上——它不是 bug 修复，而是靠触发 BFC（块级格式化上下文）让右侧“自动避让”浮动区域。现代项目请用 display: flex 或 display: grid。
为什么右栏加 overflow: hidden 就能自适应？
根本不是靠“隐藏溢出”，而是触发 BFC 后，右侧容器形成独立渲染区域，浏览器在布局时会主动绕开左侧浮动元素占据的空间。这个行为是渲染引擎强制执行的，不依赖 width 计算或 JS 干预。
-
overflow: visible（默认值）不会触发 BFC，右侧仍按普通文档流从左上角开始渲染，文字常被左栏遮盖或整块掉到下方 -
overflow: auto也能触发 BFC，但可能意外出现滚动条（比如内容略超宽时） -
display: flow-root是语义更清晰的替代方案（IE 不支持），它专为创建 BFC 设计，无裁剪副作用 - 调试时可临时加
outline: 1px solid red看右侧容器是否真正包裹了自身内容、且不包含左栏——这才是 BFC 生效的视觉证据
float 左栏必须满足的三个硬性条件
只要漏掉一个，右栏就会塌陷、错位或换行。
- 左栏必须设明确宽度，如
width: 200px；用百分比时要注意父容器padding会影响实际可用宽度，建议配box-sizing: border-box - 左栏必须
float: left（不能是right，否则右栏逻辑要重写） - 父容器必须清除浮动，否则高度塌陷：推荐
overflow: hidden或伪元素::after { content: ""; display: table; clear: both; }；zoom: 1是 IE6–7 的 hasLayout hack，若需兼容得加上
右栏写法常见错误与修正
很多人以为加个 margin-left 就完事，结果右侧被挤到下一行——这是最典型的误用。
- ❌ 错误：只给右栏设
margin-left: 200px，没触发 BFC → 右侧仍“看不见”左栏，直接从顶部流式排布 - ❌ 错误：右栏也加
float: right→ 两栏都脱离文档流，右栏贴右边界，中间留白 - ❌ 错误：右栏用
width: calc(100% - 200px)却没配 BFC → calc 生效，但避让逻辑失效，内容仍可能被左栏遮挡 - ✅ 正确：右栏设
overflow: hidden（或display: flow-root），再配合width: calc(100% - 200px)实现响应式填满（IE9+ 支持）
IE8 及更老浏览器的兼容要点
这套组合在 IE8 下极易失效，不是写法错，而是渲染机制限制。
- IE8 不支持
calc()，右栏若需响应式，只能用 JS 动态计算宽度，或放弃自适应、改用固定margin-left - IE8 对
overflow: hidden触发 BFC 有前提：父容器必须已触发 hasLayout，所以.parent { zoom: 1; *overflow: hidden; }是常见写法（*是 IE7/8 hack） - 若右栏内含
table、flex子项或position: absolute元素，BFC 必须加在**最外层容器本身**，而不是内部某一层——否则避让逻辑不生效 - 绝对定位子元素（如
box-shadow、伪元素）可能被overflow: hidden截断，这时display: flow-root更安全，但 IE 完全不认
BFC 触发点非常明确，但它的作用范围只影响直系子元素的布局上下文。如果右栏结构嵌套深、用了非块级显示模式（比如 display: inline-block 或 table-cell），避让就会失效——这不是 CSS 写错了，是盒模型层级没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
