float:left + margin-left 布局需满足三要素：左栏设 float:left 和 width，右栏用 margin-left≥左栏宽度且 width:auto，父容器必须清除浮动（如::after伪元素），否则高度塌陷；HTML顺序不可颠倒。
float:left + margin-left 是最直白但容易出错的组合
只给左侧加 float: left 和 width，右侧不处理——它不会自动“让位”，而是从顶部开始渲染，大概率文字叠在左栏上，或整个右栏掉到下一行。关键不是浮动本身，而是右侧必须主动避让。
-
margin-left值必须 ≥ 左侧宽度（比如左栏width: 200px，右栏就得写margin-left: 200px） - 右栏不能设
width: 100%，否则会撑破容器；保持默认width: auto才能自适应 - 父容器若不处理浮动，高度会塌陷：边框消失、背景色不显示、后续元素（如 footer）顶上来
- IE6–8 下，
margin-left方案比overflow: hidden更稳定，适合老项目
父容器必须清除浮动，否则布局“漏底”
浮动元素脱离文档流，父容器感知不到内容高度，表现为真·塌陷。这不是样式没生效，是容器根本没高度。
- 推荐用伪元素清除法：
::after { content: ""; display: table; clear: both; } - 或简单粗暴：
overflow: hidden（但 IE6/7 下需补zoom: 1） - 避免只靠
height硬撑，那会破坏自适应逻辑
HTML结构顺序不能颠倒，否则浮动直接失效
浏览器按 DOM 顺序渲染。如果把右栏写在左栏前面，它先占满整行，再渲染的左栏浮动元素没地方可浮，只能被挤到下一行——两栏变上下排列。
- 正确顺序：
<div class="sidebar"></div><div class="main"></div> - 错误顺序：
<div class="main"></div><div class="sidebar"></div> - 想主内容语义优先？别硬套浮动，换
display: flex或display: grid
右侧用 margin-left 还是 overflow:hidden？看场景选
两者都能避开浮动区，但机制和副作用完全不同。
立即学习“前端免费学习笔记（深入）”；
-
margin-left: 200px：硬留空，右侧内容从指定像素后开始；左侧宽度一改，右侧必须同步改，维护成本高 -
overflow: hidden：触发 BFC，右侧自动绕开浮动区域；响应式友好，但会裁剪内部position: absolute溢出的内容 - IE6–8 中
overflow: hidden触发 hasLayout 不稳定，建议补zoom: 1
