float + overflow: hidden 能实现左侧定宽、右侧自适应，核心在于右侧 overflow: hidden 触发 bfc 使其自动避让浮动区域；左侧须设 width 并 float: left，html 顺序必须左前右后，父容器需清除浮动防塌陷。
float + overflow: hidden 是最稳的右侧自适应方案
只写 float: left 不会让右侧“自动让位”，它只会让左侧脱离文档流，右侧块级元素仍从顶部开始渲染，视觉上叠在左侧上面——这是初学者卡住最多的地方。
真正起作用的是右侧元素的 overflow: hidden（或 overflow: auto），它触发 BFC，使右侧形成独立格式化上下文，从而自动绕开左侧浮动区域。
- 左侧必须设固定
width并加float: left - 右侧不设
width，只加overflow: hidden（IE6/7 需补zoom: 1） - 父容器建议也加
overflow: hidden或伪元素清除浮动，避免高度塌陷
示例：
.parent { overflow: hidden; zoom: 1; }
.left { float: left; width: 200px; }
.right { overflow: hidden; zoom: 1; }
margin-left 方案适合简单场景，但维护成本高
给右侧设 margin-left: 200px 确实能空出左侧空间，但它本质是“硬留白”，不是真正的自适应逻辑。
一旦左侧宽度变化（比如响应式断点里改成 180px），你必须同步改右侧的 margin-left，否则错位。而 overflow: hidden 完全不用关心这个。
- 适用场景：左侧宽度绝对固定、无响应需求、右侧不含
position: absolute子元素 - 风险点：右侧若有
position: absolute元素，overflow: hidden会裁剪它，此时只能选margin-left - 注意：不要在右侧同时写
margin-left和overflow: hidden，后者会覆盖前者的布局意图
HTML结构顺序不能错：左侧必须写在前面
浮动只影响后续兄弟元素的布局行为。如果 HTML 中 .right 写在 .left 前面，那么 .left 浮动后，.right 已经渲染完毕，根本不会“感知”到浮动，结果就是两列上下堆叠。
- 正确顺序：
<div class="left"></div> <div class="right"></div> - 错误顺序：
<div class="right"></div> <div class="left"></div> - 若必须右侧优先（比如语义化或 SEO 要求），改用
display: table-cell或 Flex，别硬扛 float
浮动失效的典型错误信号
出现以下现象，基本可以判定是浮动没配对或父容器没处理好：
- 右侧内容从顶部开始、盖住左侧（缺
overflow或margin-left） - 父容器高度为 0，后续元素上移（缺清除浮动或 BFC 触发）
- 右侧内容在小屏幕下突然换行（左侧
width用了百分比但没约束最大值） - IE6/7 下右侧被截断（漏了
zoom: 1）
真正难的不是写几行 CSS，而是理解浮动不是“排版指令”，而是“文档流干预操作”——它改变的是渲染顺序和包含块关系，不是简单的左右对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
