在CSS中实现文字环绕图片的效果，最常用的方案就是使用float属性，该属性可以让元素脱离常规文档流，向左或者向右浮动，后续的非浮动内容会自动环绕在浮动元素的周围，刚好满足文字环绕图片的需求。
核心实现原理
float属性的取值为left时，元素会向左浮动，其右侧的内容会沿着元素的右边缘排列；取值为right时，元素会向右浮动，其左侧的内容会沿着元素的左边缘排列。图片设置float属性后，后续的文字内容会自动填充图片周围的空间，形成环绕效果。
基础实现步骤
1. HTML结构搭建
首先需要准备包含图片和文字的基础HTML结构，图片和文字可以是相邻的兄弟元素，也可以是包含在同一容器内的不同子元素。
<div class="wrap">
<img src="pic.jpg" alt="示例图片" class="float-img">
<p class="text-content">
这是一段测试文字，用来展示文字环绕图片的效果。当图片设置了浮动属性之后，这段文字会自动排列在图片的右侧，如果文字内容足够多，还会在图片下方继续排列，形成完整的环绕效果。我们可以调整图片的大小和浮动方向，来观察文字排列的变化情况。
</p>
</div>
2. CSS样式设置
给图片添加float属性，同时可以设置图片的间距，避免文字和图片贴得太近，影响阅读体验。
.float-img {
/* 向左浮动，文字会排列在图片右侧 */
float: left;
/* 设置图片宽度，避免图片过大占据过多空间 */
width: 200px;
/* 右侧和下方的外边距，让文字和图片之间有间隔 */
margin-right: 15px;
margin-bottom: 10px;
}
.text-content {
/* 不需要额外设置特殊属性，文字会自动环绕浮动元素 */
line-height: 1.6;
font-size: 16px;
color: #333;
}
不同场景的适配方案
向右浮动的场景
如果需要文字排列在图片左侧，只需要将float的取值改为right即可，同时调整外边距的方向。
.float-img-right {
float: right;
width: 200px;
/* 左侧和下方的外边距 */
margin-left: 15px;
margin-bottom: 10px;
}
多图环绕的场景
如果页面中有多张图片需要被文字环绕，只需要给每张图片都设置对应的float属性即可，文字会按照图片的浮动方向依次环绕排列。
<div class="wrap">
<img src="pic1.jpg" alt="图片1" class="float-left">
<img src="pic2.jpg" alt="图片2" class="float-left">
<p class="text-content">
这段文字会环绕在两张向左浮动的图片右侧，如果文字内容足够长，还会在两张图片的下方继续排列，形成自然的环绕效果。
</p>
</div>
.float-left {
float: left;
width: 150px;
margin-right: 15px;
margin-bottom: 10px;
}
常见问题及解决方法
父元素高度塌陷问题
当子元素设置float属性后，会脱离常规文档流，导致父元素无法被内容撑开，出现高度塌陷的问题。可以通过给父元素添加overflow: hidden属性，或者使用clearfix伪元素方案解决。
/* 方案1：父元素设置overflow */
.wrap {
overflow: hidden;
}
/* 方案2：clearfix伪元素清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
文字与图片间距不合理
如果文字和图片贴得太近，可以通过调整图片的margin属性来增加间距，不要直接给文字设置左边距，避免在没有图片的时候文字出现多余的空白。
兼容性说明
float属性是CSS1就引入的属性，所有主流浏览器都支持，包括IE6及以上版本，不需要添加额外的浏览器前缀，兼容性非常好，可以放心在项目中使用。