右侧内容掉到下一行是因为浮动元素脱离文档流，右侧块级元素默认无视它；用 overflow: hidden 或 display: flow-root 触发 bfc 可使其感知并绕排浮动元素，推荐优先使用 display: flow-root。
直接给右侧内容容器加 overflow: hidden 或 display: flow-root，就能让它“感知”到左侧浮动元素并自动避让，而不是被挤到下一行。
为什么右侧内容会掉到下一行
这不是右侧内容“想换行”，而是它根本没意识到左边有个浮动元素——因为浮动元素已脱离文档流，右侧块级元素默认无视它，从顶部开始渲染。如果容器宽度不够，文字就会被硬生生顶下去，看起来像错位或跳行。
常见错误包括：
- 只给右侧元素加
clear: both：它只会把自己往下推，不解决绕排问题 - 给右侧元素也加
float: left：两个浮动元素同行排列，但父容器高度塌陷，后续布局全乱 - 没设宽度或
max-width：右侧容器默认 100% 宽，和浮动项冲突
推荐两种稳定修复方式
overflow: hidden 和 display: flow-root 都能触发 BFC（块级格式化上下文），让右侧容器把左侧浮动当作“有形障碍物”来绕排，而不是视而不见。
优先选 display: flow-root，原因如下：
- 语义清晰，专为包裹浮动设计，无副作用
- 不会意外裁剪
box-shadow、transform或position: absolute子元素 - 现代浏览器（Chrome 64+、Firefox 58+、Safari 15.4+）已全面支持
兼容旧版可退而用 overflow: hidden，但务必确认它不会截断弹层或下拉菜单。
右侧是纯文字段落时的特别处理
若右侧是 <p></p> 这类行内内容容器，且你观察到首行文字被“吸”到浮动图/块下方，说明它进入了绕排上下文，但宽度不足。此时需：
- 确保该
<p></p>有明确宽度约束，比如max-width: calc(100% - 220px)（预留左侧浮动宽度 + 间隙） - 检查是否误设了
white-space: nowrap—— 它会让整段文字拒绝换行，哪怕容器只剩 1px 宽 - 避免在浮动元素和文字之间插入空格或换行符，HTML 空白字符可能引入约 4px 不可控间隙
别在媒体查询里只改 clear
响应式场景下，小屏错位往往是因为你只在 @media 里写了 .right { clear: both; }，但没动 float 本身。结果是浮动还在生效，父容器依然塌陷，右侧内容只是被“推远了一点”，并未真正回归文档流。
正确做法是同步重置：
-
float: none（退出浮动） -
width: 100%（防止 auto 宽度撑开） -
margin-left: 0（清除原浮动留下的偏移）
更省事的是：小屏直接切 display: flex，三行代码搞定对齐与换行，不用再跟浮动较劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
