使用float属性实现图文混排，通过float:left或right使文字环绕图片，配合margin调整间距，用clear:both或伪类清除浮动影响，结合vertical-align优化对齐，并在响应式设计中通过媒体查询在小屏取消浮动以提升可读性，兼顾兼容性与布局美观。
在CSS中实现图文混排的浮动效果，主要依赖于float属性来控制图片与文字的相对位置。通过合理使用float和清除浮动，可以让文字自然环绕在图片周围，形成协调的布局。
1. 基础图文环绕：使用 float 属性
将图片设置为左浮动或右浮动，文字内容会自动环绕在另一侧。
示例代码：<img src="example.jpg" style="float: left; margin-right: 10px;">
<p>这里是围绕图片的文字内容...</p>
- float: left;：图片靠左，文字在右侧环绕
- float: right;：图片靠右，文字在左侧环绕
- 添加 margin 可增加图文间距，提升可读性
2. 控制环绕范围：避免影响后续元素
浮动元素可能影响页面中后续块级元素的布局，需使用clear属性阻止这种影响。
- 在不需要环绕的元素前添加 clear: both;
- 也可使用伪类 ::after 清除浮动容器内的影响
.container::after {
content: "";
display: block;
clear: both;
}
3. 图文对齐优化：结合 vertical-align 与 line-height
当图片与小段文字并排显示时（如图标+说明），可使用vertical-align微调垂直对齐。
立即学习“前端免费学习笔记（深入）”；
- 将图片和文字设为 inline-block 元素
- 用 vertical-align: middle; 实现居中对齐
- 调整 line-height 可控制单行文本的高度匹配
4. 响应式考虑：移动端适配建议
在小屏幕上，图文环绕可能影响阅读体验，建议通过媒体查询调整布局。
- 在移动设备上取消浮动，让图片独占一行
- 使用 @media 查询控制不同屏幕下的显示方式
img { float: none; display: block; margin: 0 auto; }
}
基本上就这些。合理运用 float 与清除机制，再配合响应式处理，就能实现清晰美观的图文混排效果。虽然现代布局更多使用 Flex 或 Grid，但在内联内容排版中，float 依然实用且兼容性好。
