float + overflow: hidden 实现两栏自适应的本质是触发bfc使右栏主动避让左栏浮动区域，而非计算宽度；需同时满足左栏定宽+float:left、右栏触发bfc（如overflow:hidden）、父容器清除浮动三个条件，缺一即导致错位或塌陷。
浮动实现两栏自适应布局，本质不是“让右栏自动计算宽度”，而是靠触发 BFC 让右栏主动绕开左栏浮动区域——漏掉任一条件，就会错位、塌陷或重叠。
float + overflow: hidden 是怎么生效的
右栏加 overflow: hidden 不是为了隐藏内容，而是强制它生成 BFC（块级格式化上下文），从而在布局阶段就避开左栏浮动占据的空间。这和 margin-left 的“硬留空”逻辑完全不同：前者是渲染引擎自动避让，后者是手动指定起点。
-
overflow: visible（默认）不会触发 BFC，右栏仍从容器顶部开始流式排布，文字常被左栏遮盖 -
overflow: auto也能触发 BFC，但内容略超宽时可能意外出现滚动条 -
display: flow-root是语义更干净的替代，但 IE 完全不支持 - 调试时可临时加
outline: 1px solid red看右栏是否真正包裹自身内容、且不包含左栏——这才是 BFC 生效的视觉证据
左栏必须满足的三个硬性条件
只写 float: left 不会自动让右栏“让位”，它只会脱离文档流，右栏仍按普通流从顶部渲染——这是新手最常卡住的地方。
- 左栏必须设明确宽度，如
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: 200px 就完事，结果右栏被挤到下一行——这不是 CSS 写错了，而是没理解浮动避让的本质。
- ❌ 错误：只给右栏设
margin-left: 200px，没触发 BFC → 右侧仍“看不见”左栏，直接从顶部流式排布 - ❌ 错误：右栏也加
float: right→ 两栏都脱离文档流，右栏贴右边界，中间留白 - ❌ 错误：右栏用
width: calc(100% - 200px)却没配 BFC →calc生效，但避让逻辑失效，内容仍可能被左栏遮挡 - ✅ 正确：右栏设
overflow: hidden（或display: flow-root），再配合width: calc(100% - 200px)实现响应式填满（IE9+ 支持）
HTML 结构顺序为什么不能颠倒
浮动依赖渲染顺序。如果把右栏写在 HTML 前面，它先渲染、占据整行，再渲染的左栏浮动元素会被“挤”到下一行——布局彻底失效。
- 正确顺序：
<div class="sidebar"></div> <div class="main"></div> - 错误顺序：
<div class="main"></div> <div class="sidebar"></div> - 想语义优先（主内容在前），就别用浮动，改用
flex或grid——浮动天生不支持 DOM 顺序与视觉顺序分离 - IE6–8 兼容性里最容易漏掉的一件事：老 IE 对
overflow: hidden触发 BFC 的支持不稳定，常导致父容器仍塌陷，必须补zoom: 1或伪元素清除法
浮动布局现在确实是保底手段，但只要还有老系统在跑，就得知道它每个条件怎么咬合——关键不是记住语法，而是理解 float 本质是文本环绕机制，所有布局行为都源于此。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
