关键不是“加float”，而是“锁住浮动上下文”：需显式设置float+display:block+像素宽高，父容器用display:flow-root防塌陷，并在响应式断点中同步重置float相关样式。
在富文本编辑器中用 float 实现稳定文字环绕，关键不是“加 float”，而是“锁住浮动上下文”——只要 DOM 重排、尺寸未定、或父容器塌陷，环绕立刻失效。
为什么编辑器里 float 经常突然失效？
不是 CSS 写错了，是编辑器运行时环境破坏了浮动生效的前提：
-
contenteditable区域内任意光标操作、粘贴、回车都会触发 DOM 重排，导致浮动元素脱离当前 BFC 上下文，浏览器重新计算流式布局时直接丢弃环绕逻辑 - 用户拖入图片时，
width/height常为auto或百分比（如width="100%"），shape-outside和浮动区域都依赖可计算尺寸，此时被静默忽略 - 编辑器自动生成的 HTML 常把图片包进
<figure></figure>或<div class="image-wrapper">，而 <code>float只对直接子元素生效，嵌套层级一多就断链必须显式设置
float+display: block+ 像素宽高三者缺一不可，漏一个就退化为普通块级元素：
-
float: left或float: right必须写在<img>标签上，不能靠父容器继承，也不能用!important覆盖（编辑器内联样式优先级更高） -
display: block是必须项：<img>默认是 inline 替换元素，部分浏览器下margin不生效，且无法正确参与 BFC 构建 - 宽高必须是像素值（如
width: 240px）或由aspect-ratio+ 明确width推导出高度；max-width: 100%或width: 80%会让浏览器无法确定浮动边界
父容器必须用
display: flow-root防塌陷这是编辑器场景下最干净的解法，比
clearfix更可靠：-
display: flow-root强制创建新的 BFC，让父容器“感知”浮动元素高度，避免第二段文字掉到图片下方 - 兼容性足够：Chrome 64+ / Firefox 61+ / Safari 15.4+（2026 年已覆盖全部主流编辑器运行环境）
- 别用
overflow: hidden：它虽能闭合 BFC，但会裁剪position: absolute的下拉菜单、工具提示、或弹出面板 - 别给
<img>加clear：它自己已经浮走了，加了也没用；需要换行的段落（如<h2></h2>）才该加clear: both
响应式断点里要同步重置
float相关样式小屏下不处理，文字会溢出或压图：
- 媒体查询中不能只改
width，必须同步调整float、margin和父容器display值 - 例如大屏：
float: left; margin-right: 16px;→ 小屏建议改为：float: none; margin: 1em auto; display: block;，再加clear: both确保居中独占一行 - 特别注意 RTL 页面：
float: left在阿拉伯语/希伯来语环境下应动态切换为float: right，CSS 本身不自动适配文本方向
真正难的不是写出能绕图的 CSS，而是在编辑器频繁 DOM 变更、异步图片加载、用户随意删改 HTML 结构的前提下，让那一小段
float始终有正确的上下文、尺寸和作用域。很多“失效”其实发生在 JS 动态注入样式时漏掉了display: block，或服务端返回的图片标签带了width="100%"却没做归一化处理——这些细节一旦漏掉，整个环绕逻辑就静默崩塌。 -
