最常用可靠的文字环绕图片方式是用float属性，通过float:left或right使图片浮动，文字自动环绕，配合margin控制间距，用clearfix等方法清除浮动防止塌陷。

让文字环绕图片，最常用也最可靠的方式就是用 float 属性。它能让图片脱离文档流向左或右“漂”起来，后面的文本自然会绕到另一侧排版。

基础浮动写法

给图片加 float: left; 或 float: right; 即可触发文字环绕效果：

• 图片加 float: left; → 文字从右侧开始环绕
• 图片加 float: right; → 文字从左侧开始环绕
• 记得设置图片的 margin（比如 margin-right: 12px;），避免文字贴得太紧

控制环绕范围与间距

浮动只影响后续的块级元素和内联内容，但默认会一直影响到父容器底部。常见优化方式：

Myosin Hivemind Knowledge Retrieval

搜索 Hivemind 精选的 Web3 营销知识库（RAG），获取从业者洞察、框架、实操指南和案例研究。当：(1) an... 时使用此技能。

下载

• 给图片加 width 和 height（或使用 max-width: 100%; 响应式）防止撑破布局
• 用 margin-bottom 控制图片下方文字的起始距离
• 若只想让一段文字环绕，把这段文字包在单独的 <p> 或 <div> 里更可控

清除浮动避免布局塌陷

浮动元素会脱离文档流，可能导致父容器高度塌陷（看起来“没内容”）。常用清除方法：

立即学习“前端免费学习笔记（深入）”；

• 在父容器末尾加一个空标签：<div style="clear: both;"></div>
• 给父容器设置 overflow: hidden; 或 overflow: auto;（简单有效）
• 现代推荐用伪元素清除：.clearfix::after { content: ""; display: table; clear: both; }，再给父容器加 class="clearfix"

替代方案：CSS Shapes（进阶）

如果想实现更复杂的环绕效果（比如文字绕着圆形、多边形图片走），可以尝试 CSS Shapes：

• 配合 shape-outside + clip-path 使用，例如：shape-outside: circle(50%);
• 注意：需搭配 float 才生效，且目前对 IE 完全不支持，Chrome/Firefox/Edge 较新版本可用
• 日常排版中，float 已足够；Shapes 更适合设计感强的专题页