最常用可靠的文字环绕图片方式是用float属性，通过float:left或right使图片浮动，文字自动环绕，配合margin控制间距，用clearfix等方法清除浮动防止塌陷。
让文字环绕图片，最常用也最可靠的方式就是用 float 属性。它能让图片脱离文档流向左或右“漂”起来，后面的文本自然会绕到另一侧排版。
基础浮动写法
给图片加 float: left; 或 float: right; 即可触发文字环绕效果：
- 图片加
float: left;→ 文字从右侧开始环绕 - 图片加
float: right;→ 文字从左侧开始环绕 - 记得设置图片的
margin（比如margin-right: 12px;），避免文字贴得太紧
控制环绕范围与间距
浮动只影响后续的块级元素和内联内容，但默认会一直影响到父容器底部。常见优化方式：
- 给图片加
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 更适合设计感强的专题页
