overflow:hidden清除浮动的核心原理是触发BFC，使父容器包含浮动子元素、避免高度塌陷；它并非设计本意，而是副作用生效，同时会裁剪真正溢出的内容。
浮动 + margin-left 能实现，但必须满足三个硬性条件：左侧要浮动、右侧要触发 BFC、右侧不能也浮动。现代项目里它只是兼容性兜底方案，不是首选——但如果你在维护老系统或需要 IE9 支持，这套组合依然有效。
为什么右侧必须加 overflow: hidden？
浮动元素会脱离文档流，左侧 .left { float: left; width: 200px; } 后，右侧元素默认仍按“从顶部开始流式排布”，结果就是文字直接从左栏下方往上顶，而不是绕开它占满剩余宽度。
加 overflow: hidden 是为了触发 BFC（块级格式化上下文），让右侧容器形成一个独立渲染区域，自动避开浮动影响。这是最轻量、最可靠的写法。
- 别用
clear: both—— 它只清浮动，不解决右侧“不知道左边占了多宽”的问题 - 别用
display: inline-block—— 行内块会产生空白间隙，且对垂直对齐敏感 - 更别给右侧也加
float: right—— 那就真成左右分家，右侧会贴右边界，中间留白
margin-left 的值怎么定？必须写死像素吗？
是的，margin-left 必须等于左侧浮动元素的宽度，而且得是固定值（如 200px），不能用百分比或 em。因为浮动本身不参与文档流计算，右侧无法通过 CSS 自动感知“左边占了多少”，只能靠你手动告诉它：“你左边空出 200px”。
这意味着：如果左侧宽度可能变（比如响应式下缩为 160px），右侧的 margin-left 也得同步改——否则要么重叠，要么留白。
- 常见错误：
.right { margin-left: 20%; }→ 小屏下 20% 可能远小于左侧实际宽度，内容被遮盖 - 安全写法：
.left { width: 200px; }和.right { margin-left: 200px; }必须严格对应 - 父容器记得设
overflow: hidden或clearfix，否则整个布局容器高度会塌陷
文字溢出、换行、高度不一致这些坑怎么填？
浮动布局对内容“不敏感”：右侧即使只有几行字，也会撑满整行；但若里面塞了个长 URL 或无空格英文串，又会横向撑破容器。
这不是布局失效，而是盒模型默认行为——margin-left 只管定位起点，不管内部怎么渲染。
- 防溢出：
.right { word-break: break-word; }或overflow-wrap: break-word; - 防高度塌陷：右侧内容少时，若需视觉上撑满父容器，不能只靠
min-height: 100vh—— 父容器本身得有高度上下文（比如html, body { height: 100%; }） - 别在右侧用
white-space: nowrap，除非你明确要禁止单词换行
真正容易被忽略的是：浮动布局下，所有依赖“自然高度计算”的交互（比如 JS 获取 offsetHeight、CSS calc(100% - 50px)）都可能不准——因为浮动破坏了常规流的高度传递。一旦涉及动态内容或 JS 操作，建议尽早迁移到 flex 或 grid。前者只需改三行 CSS，后者连 margin-left 都不用算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
