使用CSS浮动实现图文混排，通过float:left或right使文字环绕图片，配合margin、border-radius优化视觉效果，并用clear:both或BFC清除浮动，确保布局稳定，适用于文章页等文本密集场景。
想让图片和文字自然排版，形成图文并茂的效果，CSS中的浮动（float）是一个经典且实用的方法。虽然现代布局更多使用Flexbox或Grid，但在简单的内容区域，比如文章页、博客正文，float 依然是实现文字环绕图片的高效手段。
理解 float 的基本原理
浮动元素会脱离标准文档流，向左或向右移动，直到其边缘紧贴父容器或另一个浮动元素的边缘。其余文本内容则会围绕它排列，这正是实现文字环绕的关键。
常用属性值：
- float: left; — 图片靠左，文字在右侧环绕
- float: right; — 图片靠右，文字在左侧环绕
- float: none; — 默认值，不浮动
基础图文混排示例
以下是一个典型的图文环绕结构：
立即学习“前端免费学习笔记（深入）”；
<div class="article"> <img src="example.jpg" alt="示例图片" class="float-left"> <p>这里是围绕图片的文字内容……</p> </div>
CSS样式设置：
img.float-left {
float: left;
margin: 10px 15px 10px 0; /* 为文字留出空间 */
width: 150px;
border-radius: 8px;
}
.article p {
line-height: 1.6;
}
这样图片就会靠左显示，段落文字自动从右侧和下方环绕。
避免布局错乱：清除浮动
浮动可能影响后续元素的布局，导致内容“挤”到不该出现的位置。因此，在适当位置清除浮动很重要。
常用方法：
- 使用 clear: both; 在需要结束环绕的元素上
- 给父容器触发BFC（块格式化上下文），例如设置 overflow: hidden;
例如：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将这个类加在图文容器上，可有效防止浮动溢出。
提升可读性的小技巧
为了让图文混排更美观，注意以下细节：
- 给图片添加 margin，避免文字紧贴图像
- 使用 border-radius 让图片更柔和，提升视觉体验
- 控制图片尺寸，避免过大或过小破坏行高节奏
- 在响应式设计中，小屏幕可取消浮动，让图片独占一行
基本上就这些。掌握 float 的用法，能快速实现清晰自然的图文混排效果，特别适合内容型网页。虽然新布局方式不断涌现，但 float 在文字环绕场景中依然简洁有效。
