最稳妥方案是给浮动元素的同级后续兄弟元素设置 overflow: hidden，触发 bfc 使其绕开浮动并填满剩余宽度；固定宽度时可用 margin-left，但响应式下易失效；现代项目应优先选用 flex 或 grid 布局。
浮动元素右侧填满剩余宽度：用 overflow: hidden 最稳妥
浮动元素本身不参与文档流，所以紧随其后的兄弟块级元素默认会“无视”它，从容器顶部开始布局。要让它自动避开浮动并填满剩余宽度，overflow: hidden 是最轻量、兼容性最好（IE6+）的解法。
它生效的原理是触发 BFC（块级格式化上下文），让该元素形成独立渲染区域，自动绕开左侧浮动元素，并撑满父容器剩余宽度。
- 必须作用于浮动元素的同级后续兄弟元素，不是浮动元素自己
- 父容器无需设
height或clearfix，但需有明确宽度（比如width: 100%或由上下文决定） - 不能和
float同时用在同一个元素上，否则overflow失效 - 如果右侧元素含内联内容或图片，且未设
white-space: nowrap，可能因换行导致视觉上“没填满”——本质是内容折行，不是布局失败
固定宽度浮动 + margin-left：简单但脆弱
当左侧浮动元素宽度确定（如 width: 200px），直接给右侧元素设 margin-left: 200px 是最直白的做法。但它只在宽度绝对固定时可靠。
- 一旦左侧宽度变成
min-width、max-width或响应式变化（如@media中改宽），margin-left就不同步，容易错位或重叠 - 右侧元素若设了
width: 100%，会与margin-left叠加导致溢出，应去掉width - 不适用于多列浮动（比如左中右都浮动），仅限两栏场景
为什么 float + width: 100% 不行？
width: 100% 是相对于父容器宽度计算的，而浮动元素已脱离文档流，父容器“看不见”它占的空间，所以右侧元素设 width: 100% 会直接铺满整行，覆盖在浮动元素上方——这不是 bug，是规范行为。
- 常见错误现象：
.right { float: right; width: 100%; }→ 右侧元素跑到底部、换行，或完全遮盖左侧 - 即使加
clear: both，也只会把它推到浮动元素下方，而不是并排填满剩余空间 - 想并排，就必须让右侧元素“感知”左侧浮动的存在，
overflow: hidden或margin-left是唯二可行路径
现代项目里，别硬扛浮动布局
浮动本就不是为复杂布局设计的，它的“填剩余”能力本质是副作用，靠触发 BFC 或手动计算边距来模拟，维护成本高、响应式难适配。
真正需要填满剩余空间时，display: flex 和 display: grid 是更干净的选择：它们原生支持分配剩余空间，语义清晰，无兼容陷阱。只有当你必须兼容 IE8 或维护老代码时，才考虑浮动方案。
容易被忽略的是：浮动方案下，右侧元素的高度不会自动匹配左侧浮动元素——如果左侧很高，右侧内容短，就会出现高度不对齐。这得靠额外 JS 或 hack（如伪元素清除）补救，而 Flex/Grid 一行 align-items: stretch 就解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
