最简最稳解法是给浮动元素父容器加display:flow-root并给浮动元素自身设对应方向margin（左浮加margin-right，右浮加margin-left）；文字钻底或贴边主因是浮动元素未留物理间隙且父容器塌陷致排布失序。
直接给浮动元素的父容器加 display: flow-root，再给浮动元素自身加合适的 margin-right 或 margin-left（取决于浮动方向）——这是最简、最稳的解法。
为什么文字会“钻”到浮动元素底下或紧贴边缘？
这不是文字出错，而是浮动元素没留出物理间隙，且父容器塌陷导致后续兄弟元素失去正确排布上下文。文字环绕的是图片/块的外边距边界，不是你想象中的“右侧空白区”。
-
float: left的图片必须加margin-right，float: right的则加margin-left；只写margin: 12px会把上下 margin 也带上，干扰行高 -
<img>默认是 inline 元素，部分浏览器下margin不生效，务必同步加display: block - 开发者工具里看父容器的 Computed
height，如果接近0px，说明塌陷已发生，仅调margin无法根治
clear: both 应该加在谁身上？
clear 只对块级兄弟元素生效，且必须加在“需要避开浮动”的那个元素自己身上，不是加在浮动元素上，也不是加在父容器上。
- 浮动图片后跟一个
<p></p>，就给这个<p></p>加clear: both（或更精准的clear: left） - 侧边栏
float: left，主内容区是<main></main>，就给<main></main>加clear: left - 给
<img>自己加clear: both完全无效——它已经浮走了，clear 对它不起作用
父容器不包裹浮动，再多 clear 都白搭
清除浮动动作本身不能修复父容器塌陷。你看到的“错位”，90% 是因为父容器高度为 0，导致后续兄弟元素从“空气里”重新起排。
- 首选
display: flow-root：语义清晰、无裁剪副作用、现代浏览器全覆盖（Chrome 64+ / Firefox 61+ / Safari 15.4+） - 兼容老项目可用伪元素 clearfix：
.parent::after { content: ""; display: table; clear: both; }，注意content: ""缺一不可 - 慎用
overflow: hidden：虽能触发 BFC，但可能裁剪position: absolute的弹窗、阴影或 transform 偏移内容
真正容易被忽略的，是那个“看起来正常”的兄弟段落，其实根本没进入浮动影响的环绕上下文——它既没和浮动元素共处同一父级，也没被明确告知“要避开上面的浮动”。绕排不是自动发生的魔法，而是一连串 DOM 结构、CSS 规则和渲染上下文共同作用的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
