左侧浮动固定宽、右侧自适应错位因脱离文档流致塌陷；需父容器清除浮动（如overflow:hidden触发BFC）且右侧不浮动，overflow:hidden核心是创建BFC而非隐藏内容。
Float 左侧固定、右侧自适应为什么经常错位
因为 float 会让元素脱离文档流，而右侧内容若没做清除或包裹，就会被“吸”到浮动元素下方，而不是紧贴右侧——这是最常踩的坑。常见错误现象是：右侧区域从左侧底部开始换行，或者整个塌陷到页面左上角。
真正能用的前提是：父容器必须有明确的高度控制（比如 overflow: hidden 或伪元素清除），且右侧元素不能也设 float（否则它也会脱离流，无法自适应）。
- 左侧用
float: left+ 固定宽度（如width: 200px） - 右侧不设
float，只加overflow: hidden（触发 BFC，自动避开浮动区域） - 父容器不能是空的，否则高度塌陷；建议加
overflow: hidden或用::after清除浮动
float 实现中 overflow: hidden 的作用不是为了隐藏，而是创建 BFC
很多人以为 overflow: hidden 是为了裁掉溢出内容，其实它在这里的核心作用是让右侧元素形成一个块级格式化上下文（BFC），从而识别并绕开左侧浮动框的边界。这是右侧能“自适应剩余宽度”的关键机制。
替代方案包括 display: flow-root（现代写法，更语义化），但 IE 不支持；overflow: auto 也行，但可能意外出现滚动条。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden兼容性好（IE6+），但会截断绝对定位子元素的溢出部分 -
display: flow-root更干净，但不支持 IE 和旧版 safari - 避免用
clear: both直接加在右侧元素上——它只是清浮动位置，不解决自适应宽度问题
IE6/7 下 float 布局的两个硬伤必须手动补
IE6 对 float 的双栏计算有 bug：右侧元素的 width: auto 会被误判为 100%，导致换行；同时，若左侧有 margin，IE6 还会出现双倍边距（double-margin bug）。
这两个问题不处理，布局在老浏览器里直接失效。
- IE6 下左侧需加
display: inline消除双倍 margin - 右侧需显式设置
width: auto（虽然本该默认），或用*width: 99%（IE6 hack）占满剩余空间 - 父容器推荐用
zoom: 1触发 hasLayout，比伪元素清除更稳妥
现在还该用 float 做双栏吗
除非要兼容 IE8 及以下，否则不推荐。css Grid 和 Flexbox 更可靠、代码更少、响应式更自然。但如果你维护老项目、或面试被问到传统方案，掌握这个模式依然有用——关键是理解它依赖的是 BFC 而非“右栏宽度减法”。
最容易被忽略的一点是：这种布局下，右侧内容无法通过 margin-left 精确控制与左侧的距离，只能靠左侧的 margin-right 或整体 padding 来留白。