浮动导致文本复制“跳段”或漏字，根本原因是浮动使图片脱离文档流、父容器塌陷，致文字与图片不在同一IFC中；选区按DOM逻辑位置计算，而视觉位置被浮动偏移，造成高亮与实际内容错位。
浮动本身不会导致文本复制选区错位，真正出问题的是浮动后父容器塌陷 + 浮动元素与文字不在同一行内格式化上下文（IFC）中 —— 选中的视觉范围和实际 DOM 范围不一致，复制时漏字或多选。
为什么复制文字会“跳段”或漏掉图片旁的文字
浏览器在计算文本选区时，依据的是元素在文档流中的逻辑位置，而非渲染后的视觉位置。当 <img> 浮动但父容器未触发 BFC，它脱离流后，后续 <p> 的文本内容实际仍从父容器顶部开始布局（因为父容器高度为 0），只是被浮动图片“挤”到了右侧。此时用鼠标拖选，系统按 DOM 顺序选取，但视觉上文字贴着图片，造成“看着选中了，一粘贴却少了一截”的错觉。
- 常见现象：选中一段绕图文字，松手后高亮区域突然收缩、末尾文字消失、甚至跳到下一段开头
- 根本原因不是 CSS 渲染 bug，而是选区引擎读取的是流式布局坐标，而浮动让视觉坐标和流式坐标脱节
- 特别容易发生在 CMS 富文本输出的场景：
<p>自动包裹全文，把<img>推到段落外层，导致图片和文字根本不在同一个 IFC 里
修复关键：让图片和文字共处一个稳定的行内上下文
必须确保浮动图片和其环绕文字处于同一父容器内，且该父容器能稳定承载二者——否则浏览器无法建立正确的文本流映射关系。
- ✅ 正确结构：
<div class="media"><img src="a.jpg" class="float-left"><p>这段文字会绕图，且复制正常</p></div> - ❌ 错误结构：
<div><p>文字在前</p><img src="a.jpg"></div>——<p>已独占一行，<img>在它下方浮动，二者无共享行盒（line box），复制必错位 - 检查 DevTools 的 Elements 面板：选中文字，看高亮的 DOM 节点是否包裹了
<img>；若不包裹，说明结构已断裂
display: flow-root 是最安全的兜底方案
给图文共存的父容器加 display: flow-root，既能包裹浮动图片、稳定父容器高度，又不会干扰文本选区计算逻辑 —— 因为它创建了一个独立的块级格式化上下文（BFC），让内部的行内元素（包括文字和浮动图片）重新对齐到同一套坐标系中。
立即学习“前端免费学习笔记（深入）”；
- 比
overflow: hidden更可靠：后者可能裁剪box-shadow或transform后的视觉溢出，间接影响选区边界判断 - 比伪元素
::after { clear: both }更彻底：伪元素只解决高度塌陷，不保证行盒重排，某些旧版 Safari 下仍会出现选区偏移 - 现代浏览器全支持（Chrome 64+ / Firefox 58+ / Safari 15.4+），无需额外 hack
额外注意：inline 元素的 display 和 margin 会影响选区连续性
浮动图片默认是 inline 元素，部分浏览器对其 margin 处理不一致，会导致文字基线偏移，进一步加剧选区断点。
- 务必给浮动
<img>加display: block，否则margin-right在 Safari 中可能失效，文字紧贴图片边缘，复制时首字易被截断 - 避免只写
margin: 12px：上下 margin 会撑开行高，造成相邻行文本选区“断层”，推荐显式写margin-right: 16px; margin-bottom: 8px; - 不要依赖
vertical-align微调图片对齐：它只影响行内对齐，不改变文本流归属，反而容易让选区跨行错乱
真正容易被忽略的是：复制错位从来不是“CSS 没写好”，而是图文结构已经分裂 —— 看似绕图，实则 DOM 分离。修样式不如先查结构，display: flow-root 是最后一道防线，但源头永远在 HTML 层级是否干净。
