浮动实现两栏布局必须同时满足三个条件：左侧设width并float:left、右侧不设width且用margin-left或overflow:hidden避让、父容器触发bfc或清除浮动；html结构必须左侧在前、右侧在后，否则布局失效。
浮动实现两栏布局的核心条件
必须满足三个前提，缺一不可：float、margin或overflow、清除浮动。只写float: left不会自动让右侧“让位”，它只会脱离文档流，右侧块级元素仍会从顶部开始渲染，叠在左侧上方——这是新手最常卡住的地方。
- 左侧固定栏必须设
width并加float: left - 右侧自适应栏不能设
width，否则无法填满剩余空间 - 父容器必须触发BFC（如
overflow: hidden）或用伪元素清除浮动，否则高度塌陷，后续内容会上移
右侧自适应栏用margin-left还是overflow: hidden？
两者都能避开左侧浮动区，但行为不同：margin-left是硬留空，右侧内容从指定像素后开始；overflow: hidden是触发BFC，让右侧形成独立格式化上下文，自动绕开浮动区域——它更健壮，尤其当左侧高度不一时不会错位。
-
margin-left: 200px：简单直接，但左侧宽度变动时需同步改右侧margin，维护成本高 -
overflow: hidden：无需计算间距，响应式友好，但IE6/7下可能截断溢出内容（旧项目需测试） - 若右侧含
position: absolute子元素，overflow: hidden会将其裁剪，此时只能选margin-left
HTML结构顺序为什么不能颠倒？
浮动依赖渲染顺序。如果把右侧内容写在HTML前面，它先渲染、占据整行，再渲染的左侧浮动元素会被“挤”到下一行——布局彻底失效。必须保证左侧固定栏DOM在前，右侧自适应栏在后。
- 正确顺序：
<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（触发hasLayout）或用伪元素清除法。
- 推荐写法：
.container { zoom: 1; }或.container::after { content: ""; display: table; clear: both; } -
display: table-cell也能生成BFC，但IE6不支持，且会让右侧失去块级特性（比如margin失效） - 若项目只需支持IE8+，
overflow: auto比hidden更安全，避免意外裁剪
float本质是文本环绕机制，所有布局效果都是借了这个“副作用”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
