overflow:hidden能实现右栏自动避让，是因为它触发bfc使右栏重新计算宽度并绕开左栏浮动区；但会裁剪absolute子元素，ie6/7兼容性差，display:flow-root是更优替代。
只加 float: left 不会让右侧自适应，必须配合 BFC 触发或显式留白 —— 否则右栏大概率被遮盖或掉到左栏下方。
为什么 overflow: hidden 能让右栏“自动”避让浮动区？
它不是靠隐藏溢出内容，而是触发了 BFC（块级格式化上下文），使右侧容器重新计算可用宽度，主动绕开左侧浮动区域。这是最接近“自动”的方案，但要注意：
-
overflow: hidden会裁剪position: absolute子元素（比如下拉菜单、Tooltip），调试时可临时加outline: 1px solid red确认是否被截断 - IE6/7 下可能意外隐藏部分内容，旧项目需实测
-
display: flow-root是语义更清晰的替代，但不兼容 IE
margin-left 和 calc() 哪个更适合响应式？
两者都依赖已知左栏宽度，但维护逻辑不同：
-
margin-left: 200px：简单直接，但左栏宽度一变，右栏margin-left必须同步改；移动端 media query 切换时容易漏改 -
width: calc(100% - 200px)：浏览器自动计算，左栏改宽后右栏自动适配；但 IE8 及更早、Android 4.3 以下不支持 - 若左栏用百分比（如
width: 20%），可写成width: calc(100% - 20%)，但注意父容器padding会影响实际可用宽度，建议统一加box-sizing: border-box
父容器高度塌陷，为什么清浮动不能少？
即使右栏用了 overflow: hidden，父容器仍会塌陷为高度 0，导致后续内容上移覆盖左栏。这是因为塌陷的是父容器自身，和右栏是否 BFC 无关：
- 最简方案是
overflow: hidden或overflow: auto，但有裁剪风险 - 推荐伪元素清除：
::after { content: ""; display: table; clear: both; }，无副作用 - IE6/7 需额外加
zoom: 1或height: 1%触发 hasLayout
真正容易被忽略的是：浮动布局的“自适应”从来不是单点修复，而是 float + BFC + clear 三者协同的结果。任一环节缺失，都会在某个视口或内容长度下突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
