使用float实现文字环绕图片，通过float属性使图片左/右浮动，文字自动环绕，配合margin和overflow: hidden;优化布局。2. 利用flex布局实现图文并列，display: flex结合align-items: center实现垂直居中，gap控制间距，适合现代网页设计。3. 通过vertical-align调整行内图片与文字基线对齐，常用于图标与文本同行显示。4. 响应式排版建议使用媒体查询，在小屏幕时改为flex-direction: column，实现图片在上、文字在下的清晰布局。根据需求选择合适方法：简单场景用float，复杂布局选flex，并注重响应式适配与细节处理。
要在网页中实现图文混排，核心是利用HTML结构结合CSS样式控制布局。图片和文字的排列方式多种多样，常见如文字环绕图片、图文并列、上下居中对齐等。下面介绍几种实用的HTML与CSS技巧来实现这些效果。
1. 使用float实现文字环绕图片
这是最经典的方法，通过float属性让图片靠左或靠右，文字自动环绕在另一侧。
示例代码：
<div style="overflow: hidden;"><img src="example.jpg" alt="示例图片" style="float: left; margin: 0 15px 10px 0; width: 150px; height: auto;">
这里是围绕图片的文字内容。可以是一段描述性文字，说明图片的相关信息。浏览器会自动将这段文字排列在图片的右侧和下方，形成自然的图文混排效果。
</div>
关键点：
立即学习“前端免费学习笔记（深入）”；
- 给图片设置
float: left;或float: right; - 使用
margin为图片和文字之间留出间距 - 父容器加
overflow: hidden;防止浮动溢出（清除浮动）
2. 利用flex布局实现图文并列
现代网页更推荐使用Flexbox，它能轻松实现垂直居中、等高对齐等复杂排版。
示例代码：
<div style="display: flex; align-items: center; gap: 20px;"><img src="icon.png" alt="图标" style="width: 80px; height: 80px;">
<p style="margin: 0;">这是一段与图片并排显示的文字内容，适合用于卡片式布局或列表项。</p>
</div>
优势：
-
align-items: center;让图片和文字垂直居中对齐 -
gap属性统一控制间距 - 无需担心浮动带来的布局问题
3. 使用CSS控制图片与文字的对齐方式
有时需要微调图片与文字的基线对齐，可用vertical-align属性。
适用场景：行内图片与小段文字对齐。
<span><img src="logo.png" alt="标志" style="width: 24px; vertical-align: middle;">
公司名称
</span>
常用值：
-
middle：图片中部与文本基线对齐 -
top/bottom：顶部或底部对齐 -
text-top/text-bottom：相对于文本框对齐
4. 响应式图文排版建议
在移动设备上，有时需要取消文字环绕，改为上下排列。
做法：使用媒体查询调整布局。
<style>.responsive-content { display: flex; }
.responsive-content img { flex: 0 0 120px; }
@media (max-width: 600px) {
.responsive-content { flex-direction: column; }
.responsive-content img { margin-bottom: 10px; }
}
</style>
这样在小屏幕上图片在上、文字在下，阅读更清晰。
基本上就这些常用的HTML图文混排方法。选择哪种方式取决于你的具体需求：简单环绕用float，现代布局优先用flex，注意加上响应式处理，就能适配各种设备。不复杂但容易忽略细节，比如清除浮动或设置合适的间距。
