文字不环绕主因是html结构错误：img与文字不在同一父容器内，或p标签写在img前面导致文字无法感知浮动；须确保img在前、文字在后且同级同父，并为img设display:block和显式margin-right。
文字不环绕，90% 是因为 img 和文字不在同一父容器里，或者 <p></p> 写在了 <img> 前面。
HTML结构顺序错乱：文字在<img>前面或跨容器
浮动元素必须被后续行内内容“看见”，而浏览器只对同级、同父容器内的后续兄弟节点计算环绕。如果 <p></p> 标签包裹了全部文字并出现在 <img> 之前，文字根本不会感知浮动存在。
- ❌ 错误写法：
<div class="wrap"> <p>文字在前</p> <img src="a.jpg"> </div> - ✅ 正确写法：
<div class="wrap"> <img src="a.jpg" class="float-left"><p>这段文字会绕图</p> </div> - CMS 或富文本编辑器常自动把整段内容包进
<p></p>，导致<img>被挤到外层——务必用 DevTools 查 DOM 树实际层级，别信编辑器预览
img 缺少 display: block 和方向性 margin
文字环绕的是浮动图片的「外边距边界」，不是父容器 padding，也不是文字容器 margin。这个边界由 img 自身的 margin-right（左浮时）决定，且 img 默认是 inline 元素，在 Safari 等浏览器中 margin 可能完全不生效。
- 必须加
display: block，否则margin-right在部分浏览器下无效 - 左浮动只响应
margin-right；右浮动只响应margin-left；上下 margin 不影响环绕，但margin-bottom能防止下一段文字顶到图片底部 - 避免
margin: 0 16px 8px 0这类简写——语义模糊，易误改顶部/左侧值；推荐显式写margin-right: 16px; margin-bottom: 8px;
父容器高度塌陷：第二段文字突然掉到图片下方
第一段绕得好好的，第二段却从图片底部开始，说明父容器没“感知”浮动高度，导致后续段落按正常文档流重新排布。这不是文字问题，是容器塌陷。
- 最稳妥解法：给图片的**直接父容器**设
display: flow-root（Chrome 64+/Firefox 58+ 支持），干净触发 BFC - 慎用
overflow: hidden：虽能触发 BFC，但可能意外裁剪带阴影、动画或溢出的子元素 - 不要在
<p></p>上加clear: both：这会让整段换行，破坏环绕；如需结束环绕，应在最后一段后加<div style="clear: both"></div>
图文顺序和容器宽度不足也会导致“假不环绕”
即使 CSS 全对，文字仍可能强制换行——不是 float 失效，而是内容流本身没空间继续右侧流动。
- 确保文字容器有足够宽度：若父容器
width: 200px，而图片宽 180px +margin-right: 16px，剩余空间仅 4px，文字必然换行 - 可设
min-width或适当放宽容器宽度，尤其在响应式场景下要测试小屏表现 - 检查是否意外设置了
clear: left或clear: both在中间段落上，提前中断了环绕生命周期
真正麻烦的不是加 float: left，而是它脱离文档流后带来的连锁反应：父容器塌陷、后续段落错位、屏幕阅读器读取顺序错乱、响应式缩放后 margin 失效。这些都得靠结构语义 + 边界测试来验证，不能只看视觉对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
