float 是唯一靠谱的选择，因其能脱离标准流同时排挤后续文本行盒实现文字环绕，且全浏览器兼容；Flexbox、Grid、::first-letter 和 shape-outside 均无法独立实现该效果。
直接用 float: left 或 float: right 就能实现，其他方案要么不生效，要么引入额外复杂度。
为什么 float 是唯一靠谱的选择
现代 CSS 中，Flexbox 和 Grid 都无法原生支持文字环绕——它们把内容当整体布局，不参与行内流式换行计算；::first-letter 只作用于首字符，不能控制图片位置，更不会触发环绕；shape-outside 虽然能做轮廓环绕，但必须配合 float 才生效，且兼容性有限（IE 完全不支持）。
而 float 的本质是让元素脱离标准流、但保留对后续文本行盒的“排挤”能力，这正是文字环绕的底层机制。从 IE8 到 Chrome 120，所有主流浏览器都稳定支持。
图片浮动后文字不绕？检查这几点
-
<img alt="CSS如何实现文字环绕图片显示_利用float属性实现文字排版" >必须写在文字内容之前（HTML 顺序决定环绕起点） - 别给
<img alt="CSS如何实现文字环绕图片显示_利用float属性实现文字排版" >加display: block或margin: auto—— 这会让它脱离行内流，失去环绕基础 - 确保父容器没设
overflow: hidden或transform等意外触发 BFC 的属性，否则可能截断浮动区域 - 如果文字全是连续英文/数字（无空格），浏览器按单词换行，导致右侧留白：加
word-break: break-word或word-wrap: break-word到文字容器上
左右浮动 + 间距控制的实际写法
最简可用组合：
立即学习“前端免费学习笔记（深入）”；
img.float-left {
float: left;
margin-right: 12px;
margin-bottom: 8px;
height: auto;
max-width: 100%;
}
img.float-right {
float: right;
margin-left: 12px;
margin-bottom: 8px;
height: auto;
max-width: 100%;
}
注意：margin-bottom 是为了防止下一段文字“顶”到图片底部；height: auto 避免拉伸变形；max-width: 100% 是响应式前提，否则小屏下图片溢出容器时，环绕区域计算会错乱。
浮动影响后续布局？清除时机很关键
浮动只影响「之后的行内内容」，不影响块级兄弟元素的默认位置。所以：
- 如果只是单段图文混排，通常不需要清除浮动
- 如果图文后紧跟另一个
<p></p>或<div>，且希望它从新行开始（不被前一个浮动“带偏”），在它上面加 <code>clear: both - 如果整个图文区域被包在容器里（比如
<article></article>），推荐用 BFC 清除：给容器加overflow: hidden或display: flow-root（后者更语义化，Chrome 64+ 支持）
别用 .clearfix::after 这种老方案——除非要兼容 IE11 及更早版本。
真正容易被忽略的是：浮动效果高度依赖 HTML 结构顺序和图片原始尺寸。哪怕 CSS 写对了，<img alt="CSS如何实现文字环绕图片显示_利用float属性实现文字排版" > 放在段落中间、或用了 object-fit 裁剪，都会让环绕行为不可预测。
