使用float属性可实现图文混排，通过float:left或right使文字环绕图片，配合margin控制间距，并用clear清除浮动避免布局错乱，适用于文章插图布局。
在CSS中，使用浮动（float）可以让图片与文字实现混排效果。通过将图片设置为浮动元素，文字会自动环绕在图片的周围，常用于文章内容中插图与段落文字的布局。
1. 使用 float 属性实现图文混排
将图片设置为左浮动或右浮动，文字内容会自动围绕在图片的另一侧排列。
常用属性值：
- float: left; — 图片靠左，文字在右侧环绕
- float: right; — 图片靠右，文字在左侧环绕
示例代码：
立即学习“前端免费学习笔记（深入）”；
@@##@@这里是环绕在图片周围的文字内容。随着图片向左浮动，文字会自然地填充在图片的右侧和下方。通过添加外边距（margin），可以控制文字与图片之间的间距，使排版更美观。
2. 控制文字与图片的间距
使用 margin 属性为浮动图片添加边距，避免文字紧贴图片。
- 右边距和下边距尤其重要，确保文字不会紧挨图片底部或右侧
- 通常设置
margin: 0 15px 10px 0;实现左浮图片的良好间距
3. 清除浮动防止布局错乱
浮动元素可能影响后续内容的布局，需使用清除浮动（clear）来恢复正常流。
方法包括：
- 在不需要环绕的文字前添加
- 给父容器设置
overflow: hidden;或使用伪元素清除法
4. 实际应用场景建议
这种浮动混排方式适合传统网页文本内容布局，比如新闻文章、博客正文等。
注意点：
- 现代布局中推荐使用 Flexbox 或 Grid，但 float 仍适用于简单图文环绕
- 确保图片尺寸适中，避免过大导致页面断层
- 在响应式设计中，小屏幕可取消浮动，让图片独占一行
基本上就这些。float 实现图文混排简单有效，掌握 margin 和 clear 的配合使用是关键。不复杂但容易忽略细节。
