右侧元素掉到下一行是因宽度计算错误导致的正常换行行为，需检查父容器与浮动子元素总宽（含padding、border、margin），确保不超限，并优先改用Flex布局。
右侧元素掉到下一行，先查父容器和子元素总宽度
浮动布局里“掉下来”不是 bug，是浏览器在宽度不够时的正常换行行为。关键不是清除浮动，而是算错空间了。
常见现象：.left 和 .right 都设了 float: left，但 .right 跑到了第二行；或者用 float: right 后整个右栏直接消失在视口外。
- 打开开发者工具，看父容器的
Computed→width（比如是600px） - 再逐个检查浮动子元素的
offsetWidth（含 padding + border），加上 margin（注意：margin 不计入 offsetWidth，但占布局空间） - 加总后若超过父容器宽度，就必然掉行——哪怕只超 1px
典型陷阱：box-sizing: content-box（默认）下，width: 200px; padding: 10px 实际占宽 220px，但很多人只按 200px 算。
float: left + float: right 混用时顺序和方向必须对齐
把左栏写 float: left、右栏写 float: right 看似合理，但 HTML 中它们的书写顺序直接影响渲染位置。
立即学习“前端免费学习笔记（深入）”；
问题根源：float: right 是相对于**包含块右边界**对齐，不是“紧贴左栏右边”。如果左栏内容高、右栏内容矮，右栏会卡在左栏底部空白处，视觉上像“被顶下来”。
- 确保两个浮动元素是同级兄弟，中间没插入其他块级元素或空格
- 避免在左栏后面加
clear: both类规则——它会强制中断右栏的浮动上下文 - 若必须混用方向，右栏要放在 HTML 结构的**前面**（即先写右栏再写左栏），否则渲染顺序会颠倒
更稳的做法：统一用 float: left，右栏靠 margin-left 推开，而不是依赖 float: right。
修复宽度计算误差的三个实操要点
浮动布局容错率低，一个像素偏差就可能掉行。别靠“大概”估算，得精确控制。
- 所有浮动子元素必须设
box-sizing: border-box，把 padding/border 显式纳入 width 计算 - 父容器不要设固定
width（如width: 960px），改用max-width: 960px; width: 100%，适配响应式缩放 - 右栏的
margin-left值不能写死，得等于左栏width+ 间隙，例如左栏width: 200px、间隙20px，则右栏margin-left: 220px
如果左栏宽度不固定（比如由内容撑开），浮动方案基本不可控——这时候该换 Flex 了，别硬扛。
为什么 overflow: hidden 有时也压不住掉落
overflow: hidden 是为解决父容器塌陷，不是为防掉行。它只是让父容器“包裹住”浮动元素，但不会改变浮动本身的换行逻辑。
现象：.container { overflow: hidden; } 加了，右栏还是掉下去，甚至被裁剪看不见。
- 先确认父容器是否设置了
height或max-height，这会限制内部浮动空间 - 检查是否有未重置的
font-size或line-height导致内联内容意外撑高子元素 - 某些字体在不同系统渲染宽度有微小差异（尤其中文字体），用开发者工具切换单元格查看实际
clientWidth
真正起作用的永远是宽度分配：要么用 calc() 动态算，要么放弃 float 改用 display: flex ——后者连 BFC、清除、塌陷、掉行这些词都自动消失了。
