使用CSS浮动可实现图文混排，通过float:left或right使图片靠边，文字环绕，配合margin优化间距，并用clear:both清除浮动影响，建议控制图片大小并为小屏设置响应式布局。
使用CSS浮动（float）可以让图片和文字实现经典的混排效果，常用于文章内容中图片居左或居右，文字环绕其周围。下面介绍具体实现方法。
1. 基本HTML结构
先准备一个包含图片和文字的简单结构：
这是一段围绕图片的文字内容。文字会自动环绕在图片的周围，形成图文混排的效果。
2. 使用float让图片浮动
通过设置 float: left 或 float: right，让图片脱离文档流并靠边排列，文字自然会环绕。
img {
float: left;
margin-right: 15px;
margin-bottom: 10px;
}
- float: left：图片靠左，文字在右侧和下方环绕
- margin：添加外边距，避免文字贴得太近
3. 控制文字环绕范围
有时希望限制环绕区域或清除浮动影响，可使用 clear 属性防止元素被浮动干扰。
立即学习“前端免费学习笔记（深入）”；
- 若不想某元素受浮动影响，加上 clear: both
- 例如在段落结束处加一个清浮动的div：
4. 实际效果优化建议
- 控制图片大小，避免过大影响排版
- 为不同屏幕考虑响应式，可在小屏关闭浮动：
@media (max-width: 600px) {
img { float: none; display: block; margin: 10px auto; }
} - 现代布局更推荐使用Flex或Grid，但float在传统图文混排中依然简洁有效
