使用Float实现文字环绕图片；2. flexbox实现图文并排对齐；3. grid布局用于复杂结构；4. 注意响应式与图片适配，优先选用Flex或Grid。
实现图片文字混排布局，主要依赖 css 的浮动、弹性布局（Flexbox）或网格布局（Grid）。以下是几种常用方法，适用于不同场景。
1. 使用 float 实现图文混排
这是传统方式，适合文字环绕图片的场景。
说明：
将图片设置为左浮动或右浮动，文字内容会自动环绕在另一侧。
示例代码：
html:
<img src=”example.jpg” class=”float-left”>
<p>这里是环绕在图片周围的文字内容……</p>
CSS:
.float-left {
float: left;
margin-right: 15px;
margin-bottom: 10px;
width: 150px;
height: auto;
}
图片靠左，文字从右侧和下方环绕。使用 margin 增加间距，避免文字贴边。
立即学习“前端免费学习笔记（深入）”；
2. 使用 Flexbox 布局
适合结构清晰的图文并排，如新闻列表、产品项等。
说明：
通过弹性盒子让图片和文字在同一行对齐，并可灵活控制间距与垂直对齐。
示例代码：
HTML:
<div class=”flex-item”>
<img src=”example.jpg” class=”flex-img”>
<div class=”flex-text”>文字内容描述…</div>
</div>
CSS:
.flex-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.flex-img {
width: 80px;
height: 80px;
Object-fit: cover;
}
图片与文字水平排列，align-items: flex-start 使顶部对齐，gap 控制间距。
3. 使用 Grid 布局
适合复杂图文结构，比如多图多段落混合排版。
说明：
通过网格划分区域，精确控制图片与文字的位置。
示例代码：
HTML:
<div class=”grid-layout”>
<img src=”example.jpg” class=”grid-img”>
<p class=”grid-text”>这是一段描述文字…</p>
</div>
CSS:
.grid-layout {
display: grid;
grid-template-columns: 100px 1fr;
gap: 15px;
align-items: start;
}
.grid-img {
width: 100%;
height: auto;
}
第一列放图片，第二列放文字，结构清晰且响应式友好。
4. 注意事项与优化建议
无论用哪种方式，以下几点有助于提升效果：
- 设置 max-width: 100% 和 height: auto 防止图片溢出容器
- 使用 object-fit: cover 统一图片显示比例
- 在小屏幕中考虑调整为上下排列，可通过媒体查询实现
- 避免过度依赖 float，现代布局推荐优先使用 Flex 或 Grid
基本上就这些。选择哪种方式取决于你的具体需求：简单环绕用 float，结构化布局用 Flex 或 Grid，更灵活且易维护。