float-left 和 mr-4 无法稳定实现文字环绕，因浮动元素脱离文档流后 margin 不影响文本行盒宽度；应改用 flow-root + me-4 或手写 shape-outside。
不能靠 float-left 和 mr-4 稳定实现文字环绕图片——Tailwind 的间距类在浮动场景下会失效，且现代布局已淘汰 float 做图文环绕。
为什么 float-left + mr-4 不起作用
Tailwind 的 mr-4 生成的是 margin-right: 1rem，但浮动元素脱离文档流后，外边距对后续文本流的排版几乎无影响；文字确实会“绕”过去，但右侧文字紧贴图片边缘，没有预期留白。浏览器实际渲染时，margin 仍存在，但不参与行内换行计算，视觉上等于没加。
- 常见错误现象：
float-left mr-4写了，图片左边有空隙，右边文字却直接顶到图边 - 根本原因：CSS 浮动的环绕逻辑只响应
margin对浮动框自身的影响，不控制文本行盒（line box）的可用宽度 - 兼容性陷阱：即使加了
clear或overflow清除，也无法让mr-4“推动”文字缩进
真正有效的替代方案：使用 shape-outside 配合 float
要用浮动实现环绕，必须用 CSS 原生的 shape-outside 显式定义文字绕行区域，Tailwind 不提供该功能的工具类，需手写 CSS。
- 典型用法：
float-left保留，再加自定义类如text-wrap-around，内部设shape-outside: margin-box或shape-outside: circle() - 关键参数差异：
shape-outside: margin-box会让文字绕着 margin 边界走，此时margin-right: 1rem才真正生效 - 性能注意：复杂
shape-outside（如 SVG 路径）可能触发重排，简单矩形推荐用margin-box或直接设margin - 示例片段：
.text-wrap-around {
float: left;
margin-right: 1rem;
shape-outside: margin-box;
}
更推荐的做法：放弃 float，改用 display: flow-root + margin 或 CSS Grid
现代项目应优先用块级上下文隔离 + 标准外边距控制布局，避免浮动副作用。Tailwind v3.3+ 已支持 flow-root 工具类，配合 me-4（即 margin-inline-end）可稳定留白。
- 使用场景：图文混排、新闻卡片、博客正文 —— 只要不强求 IE 兼容，就别碰
float - 实操建议：
– 图片加float-none md:float-left（响应式降级）
– 外层容器加flow-root防止父容器塌陷
– 图片加me-4控制右侧间隙，文字自然换行避让 - 兼容性影响：
flow-root在 Safari 15.4+、Chrome 92+、Firefox 97+ 完全支持；旧版本需回退到overflow: hidden
真正难的不是加哪个 class，而是意识到 float 在 Tailwind 里只是“能用”，不是“该用”。一旦需要精确控制文字绕行距离或形状，就得跳出 utility-first 思维，补一行 shape-outside；而多数时候，用 flow-root + me-* 就够了——只是很多人没注意到 me-4 和 mr-4 在浮动上下文里的行为天差地别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
