内容跑到浮动元素旁边是因为浮动元素脱离文档流，后续块级元素会向上贴靠其空白区域；解决方法是用clear: both强制换行，或采用BFC、clearfix、Flex/Grid等现代方案。
浮动元素导致下方内容“上浮”到侧边，是因为浮动脱离了文档流，后续元素会试图填补它原来的位置。解决方法是让下方内容强制换行、不与浮动元素并排，最常用的就是 clear: both。
为什么内容会跑到浮动元素旁边？
当一个元素设置 float: left 或 float: right 后，它会从正常流中“抽离”，但依然占据视觉空间；而紧随其后的块级元素（如 <p>、<div>）默认会尝试向上“贴靠”浮动元素的空白区域，看起来就像“跑到了侧边”。这不是 bug，而是浮动的原始设计行为。
用 clear: both 强制换行
在浮动元素之后、需要换行显示的内容前，添加一个“清除浮动”的元素或直接给该内容加样式：
- 方式一：插入空标签（传统写法）
<div style="clear: both;"></div> - 方式二：直接给目标元素设置
clear: both<p style="clear: both;">这段文字会从下一行开始显示</p> - 注意：
clear: both表示不允许左右两侧有浮动元素；也可单独用clear: left或clear: right，按需选择
更现代、推荐的替代方案
虽然 clear 有效，但手动加空标签或到处写 clear 容易混乱。建议优先使用以下方法：
立即学习“前端免费学习笔记（深入）”；
-
BFC 触发法：给浮动的父容器设置
overflow: hidden（或auto、scroll），可自动包裹浮动子元素，避免影响外部布局 -
::after 伪元素清除法（clearfix）：
给浮动元素的父容器添加类，例如：.clearfix::after { content: ""; display: table; clear: both; }
然后在 HTML 中：<div class="clearfix"><div style="float:left">左浮</div></div> -
Flex / Grid 布局替代浮动：现代布局中，用
display: flex或display: grid实现并排效果，完全规避浮动带来的清除问题
小提醒：clear 只对块级元素生效
clear 属性对内联元素（如 <span>）无效。如果发现加了 clear: both 没反应，检查该元素是否为 display: inline（可改为 block 或 inline-block）。
