浮动本身不提供自适应能力，真正实现右侧自适应的是配合overflow:hidden触发bfc让右栏自动避让左栏浮动区域，或用margin-left/calc()硬留白；仅float:left会使右栏叠盖或下移。
浮动本身不提供自适应能力，float 只是让元素脱离文档流并靠边；真正实现“右侧自适应”的，是配合 overflow: hidden、margin-left 或 calc() 等手段触发的布局行为。直接写 float: left 而不做后续处理，右侧内容大概率会叠在左栏上或整体下移。
为什么只加 float: left 不行？
浮动元素脱离文档流后，其他块级元素仍按原始起点（左上角）渲染，不会自动“感知”左侧空出的空间。常见错误现象包括：
- 右侧文字被左栏遮盖（尤其在内容较短时）
- 右侧整个
<div> 掉到左栏下方（当右栏没设任何避让规则时）<li>父容器高度塌陷，后续内容顶上来覆盖左栏</li> <p>根本原因：浏览器没被告知“右侧要绕开浮动区”。必须用某种方式让右侧形成独立格式化上下文（BFC）或硬性留白。</p> <h3> <code>overflow: hidden是怎么让右栏自适应的？它不是靠“隐藏溢出”，而是触发 BFC —— 此时右侧容器会重新计算可用宽度，主动绕开左侧浮动区域。这是最接近“自动”的方案，但要注意：
-
overflow: hidden对position: absolute子元素有裁剪风险，若右栏内含弹层、下拉菜单等，可能被截断 - IE6/7 下可能意外隐藏部分内容（旧项目需实测）
-
display: flow-root是语义更清晰的替代，但不兼容 IE - 调试时可临时加
outline: 1px solid red，确认右栏容器是否真正包裹自身内容且不包含左栏
margin-left和calc()各适合什么场景？两者都依赖已知左栏宽度，区别在于维护方式和兼容性：
-
margin-left: 200px：简单直接，但左栏宽度一变，就必须同步改右栏margin-left，响应式切换时容易漏改 -
width: calc(100% - 200px)：宽度计算交由浏览器，左栏改宽时右栏自动适配，但 IE8 及更早版本、Android 4.3 以下不支持 - 若左栏用百分比宽度（如
width: 20%），calc()可写成width: calc(100% - 20%)，但注意父容器 padding 会影响实际可用宽度，建议搭配box-sizing: border-box
父容器清除浮动为什么不能少？
不处理的话，父容器高度为 0，后续内容会上移覆盖左栏。常用方案有：
-
overflow: hidden（最简，但有裁剪副作用） - 伪元素清除：
::after { content: ""; display: table; clear: both; }（推荐，无副作用） - IE6/7 兼容需加
zoom: 1触发 hasLayout
最容易被忽略的是：即使右栏用了
overflow: hidden，父容器仍需清除浮动——因为塌陷的是父容器高度，不是右栏自身的问题。 -
