必须由编辑器自动注入规范class和style并限制浮动方向与间距档位，因用户手动写float和margin易导致文字错位、行高干扰、margin失效及clear破坏环绕；插入时按对齐方式添加预设class并显式设display:block；响应式断点需重置浮动逻辑，小屏统一取消float并调整margin或改用inline-block。
不能靠用户手动写 float 样式，必须由编辑器在插入时自动注入规范的 class 和内联 style，并限制可选浮动方向与间距档位。
为什么不能让用户自由写 float 和 margin
富文本编辑器里允许用户直接编辑 HTML 或 CSS，会导致：
• float: left 和 margin-left: 20px 同时存在，文字反而被推到右侧空白区；
• 用户用 margin: 10px 简写，上下 margin 干扰段落行高，第二段文字突然下沉；
• 图片未设 display: block，在 Safari 或旧版 Chrome 中 margin-right 完全不生效；
• 用户给父 p 加 clear: both，整段文字被迫换行，破坏环绕。
插入图片时自动添加安全浮动 class
编辑器应在插入图片节点时，根据用户选择的对齐方式（左/右/居中），自动写入预设 class，例如：
• 左对齐 → 添加 class="rich-img-left"，对应 CSS：
img.rich-img-left {<br> float: left;<br> margin-right: 16px;<br> margin-bottom: 8px;<br> display: block;<br>}
• 右对齐 → class="rich-img-right"，CSS 中只设 margin-left；
• 居中 → 不设 float，改用 display: block; margin: 0 auto;；
• 所有 class 必须显式声明 display: block，禁用 inline 默认行为。
响应式断点必须同步重置浮动逻辑
仅在 PC 端加 float 而不处理小屏，是富文本最常翻车的点：
• 在 @media (max-width: 768px) 中，统一重置：
img.rich-img-left,<br>img.rich-img-right {<br> float: none !important;<br> margin-left: 0 !important;<br> margin-right: 0 !important;<br> margin-bottom: 12px !important;<br>}
• 避免用 max-width + 百分比宽度混搭：移动端图片缩到 80px 时，margin-right: 16px 会撑出无意义空白，此时环绕已无价值；
• 若需保留图文节奏感，小屏改用 display: inline-block; vertical-align: top; 配合 text-align: center，比强行维持 float 更可控。
真正难的不是让图片浮起来，而是让编辑器知道“什么时候该让它沉下去”。所有浮动都得配一套可预测的退出机制，否则用户一缩放、一复制、一粘贴，就全乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
