必须用 display: flow-root 或 overflow: hidden 为富文本容器创建 BFC 来兜底清除浮动，因编辑器输出无结构可依赖；推荐 .rich-text { display: flow-root; }，兼顾语义、安全与现代兼容性。
富文本编辑器（如 TinyMCE、CKEditor、Quill）生成的 HTML 通常不控制浮动逻辑，直接写 float 但不闭合，会导致父容器塌陷、后续内容上移、打印错乱等问题。这不是“要不要清除”的问题，而是“必须在不改 HTML 的前提下兜底处理”。
为什么不能依赖编辑器输出的 class 或结构来清除浮动
富文本编辑器导出的 HTML 往往只有内联样式，比如：<p style="float: left; width: 200px;">图片</p>，没有 wrapper、没有语义 class、甚至没有固定父容器 ID。你无法给每个浮动 <p> 或 <img> 手动加 clearfix 类——编辑器不给你这个钩子。
常见错误现象包括：
- 图文混排后，下方段落紧贴浮动图右侧，而非换行
- 富文本容器（如
<div class="content">）高度为 0，背景色/边框消失 - 打印预览时整页错位，因为 print CSS 里
overflow失效更明显
用 overflow: hidden 或 overflow: auto 触发 BFC 是最快兜底方案
这是唯一能对任意未知浮动子元素“无差别生效”的纯 CSS 方案，原理是让父容器创建新的块级格式化上下文（BFC），从而包含所有浮动后代。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给富文本内容容器统一加一个类，比如
.rich-text，然后定义：.rich-text { overflow: hidden; } - 如果内容可能横向溢出（如长代码块、宽表格），改用
overflow: auto，但需注意滚动条可能意外出现；overflow: hidden更稳妥 - IE6/7 不支持
overflow触发 BFC，但这类浏览器已无实际维护价值；若真要兼容，补zoom: 1即可（仅 IE 原生识别） - 不要用
overflow: scroll—— 强制滚动条，UI 污染严重
::after 伪元素方案在富文本场景下容易失效
标准 .clearfix::after 要求你手动给父容器加 class="clearfix"，而富文本容器往往由 CMS 或框架动态渲染，你很难保证每个 <div> 都被准确标记。更麻烦的是：
- 编辑器可能把多个富文本区块塞进同一个父容器，但只有一部分含浮动，
clearfix会全局生效，可能误影响非浮动区域 - 某些编辑器（如早期 CKEditor）会在输出 HTML 里自动插入
<br clear="all">，和::after清除逻辑冲突，导致双倍空白 -
::after对内联样式浮动的<img>生效，但对style="float: left"的<span>或<em>可能无效（因 display 计算优先级）
现代项目应优先用 display: flow-root 替代 overflow
display: flow-root 是专为解决此问题设计的属性：它明确创建 BFC，且不带 overflow 的副作用（比如裁剪阴影、隐藏 position: fixed 子元素、干扰 transform 层叠上下文）。
实操要点：
- 替换写法：
.rich-text { display: flow-root; } - 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+，2026 年已覆盖全部主流环境
- 注意：IE 完全不支持，但如果你还在支持 IE，说明项目技术栈已严重滞后，此时更该推动升级而非打补丁
- 如果富文本容器本身需要设置
overflow-y: auto（比如限制高度滚动），flow-root和overflow可共存，互不冲突
真正棘手的不是选哪个 CSS 技巧，而是富文本容器是否被正确包裹——很多项目把编辑器内容直接 v-html 或 dangerouslySetInnerHTML 注入到一个没设任何样式的 <div> 里，连最外层容器都没有 class。这种情况下，连 flow-root 都加不上，得先从模板层补个 class="rich-text"。
