浮动图片撑破容器是因富文本中img脱离父容器参照系且CSS选择器失效；小程序等平台仅支持class或内联style控制，需用属性选择器如img[alt]加!important修复，最佳实践是后端直接注入style或前端JS预处理。
富文本里的浮动图片撑破容器，根本不是图片本身“太宽”，而是它压根没把父容器当参照系——max-width: 100%算的是视口宽度，不是你写的那个 <div class="content">。
rich-text 中 img 无法被普通 CSS 选择器匹配
小程序（微信/支付宝/uni-app）和部分 H5 富文本渲染器会把 HTML 字符串解析为内部节点，不走标准 DOM 渲染流程。你写在 <style> 里的 img { max-width: 100%; } 在小程序端基本无效。
- 官方明确限制：仅支持通过
class或内联style控制富文本内元素，标签选择器、后代选择器均不生效 - 真机调试时能看到
<img src="...">根本没 class，也没父级上下文，浏览器找不到作用域 - 哪怕加了
scoped，App.vue 或页面 style 中的全局 img 规则也会被忽略
浮动 + 富文本 = 双重脱离文档流
浮动让图片脱离文档流，富文本又让它脱离样式作用域，两个机制叠加，导致尺寸完全失控。
-
float: left使图片的包含块变成视口或最近定位上下文，max-width: 100%就按屏幕宽度算（比如 414px → 实际渲染成 414px 宽，但父容器只有 320px） - 如果富文本里还嵌了
<span>或其他 inline 元素，它们默认不触发 BFC，更不会约束浮动子项 - 常见现象：iOS 真机上图片横向溢出、触发滚动条；Android 上文字被顶到图片下方空白处
真正能生效的三类写法（小程序实测）
必须用属性选择器 + !important，且写在非 scoped 的全局 style 区域（如 App.vue 的 <style>）。
立即学习“前端免费学习笔记（深入）”；
-
[alt] { max-width: 100% !important; height: auto !important; }—— 最简，前提是后端返回的图片都带alt（哪怕空字符串alt=""） -
img[alt], img[src] { max-width: 100% !important; height: auto !important; }—— 更稳妥，覆盖无 alt 但有 src 的情况 - 若 CMS 完全不可控，可追加
img { max-width: 100% !important; }作 H5/APP 端兜底（小程序部分机型可能偶然生效）
比修复更关键的是别用 float
在富文本这种不可控内容场景里硬套 float，等于主动放弃尺寸控制权。现代方案应绕过浮动逻辑：
- 后端返回时直接给
<img>加style="max-width:100%;height:auto;"（最可靠，无需前端样式干预） - 前端 JS 预处理：用正则匹配
<img[^>]*>，自动注入style属性（uni-app 中可在onLoad阶段做） - 彻底弃用 rich-text，改用
v-html（H5）或自定义组件（小程序），获得完整样式控制力
最容易被忽略的一点是：浮动图片在富文本中不仅撑破容器，还会干扰屏幕阅读器对内容顺序的识别——因为脱离文档流后，语义顺序和视觉顺序不再一致。
