使用float属性实现图文混排，通过float:left或right使文字环绕图片，配合margin调整间距，用clear:both或伪类清除浮动影响，结合vertical-align优化对齐，并在响应式设计中通过媒体查询在小屏取消浮动以提升可读性，兼顾兼容性与布局美观。

在CSS中实现图文混排的浮动效果，主要依赖于float属性来控制图片与文字的相对位置。通过合理使用float和清除浮动，可以让文字自然环绕在图片周围，形成协调的布局。

1. 基础图文环绕：使用 float 属性

将图片设置为左浮动或右浮动，文字内容会自动环绕在另一侧。

示例代码：

这里是围绕图片的文字内容...

• float: left;：图片靠左，文字在右侧环绕
• float: right;：图片靠右，文字在左侧环绕
• 添加 margin 可增加图文间距，提升可读性

2. 控制环绕范围：避免影响后续元素

浮动元素可能影响页面中后续块级元素的布局，需使用clear属性阻止这种影响。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• 在不需要环绕的元素前添加 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 查询控制不同屏幕下的显示方式

@media (max-width: 768px) {
  img { float: none; display: block; margin: 0 auto; }
}

基本上就这些。合理运用 float 与清除机制，再配合响应式处理，就能实现清晰美观的图文混排效果。虽然现代布局更多使用 Flex 或 Grid，但在内联内容排版中，float 依然实用且兼容性好。