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