使用CSS浮动可实现图文混排，图片设为float:left或float:right后文字自动环绕，配合margin调整间距，通过clear或overflow:hidden避免布局错乱，适用于传统文本排版。
要实现图文混排效果，CSS 的 浮动（float） 是一种经典且简单的方法。通过让图片浮动到左侧或右侧，文字内容会自动环绕在图片周围，从而达到图文并茂的排版效果。
1. 基本浮动设置
将图片设置为浮动元素，文字即可自然围绕其排列。
示例代码：<img src="example.jpg" class="float-left" alt="示例图片"> <p>这里是围绕图片的文字内容。Lorem ipsum dolor sit amet...</p>
CSS 样式：
.float-left {
float: left;
margin-right: 15px;
margin-bottom: 10px;
width: 150px;
height: auto;
}说明：图片向左浮动，右边留出间距供文字排列，下方也留空避免紧贴下一段落。
立即学习“前端免费学习笔记（深入）”；
2. 控制浮动范围与清除浮动
浮动元素脱离正常文档流，可能导致后续内容布局错乱。使用 clear 属性可控制影响范围。
- 在不需要环绕的元素前添加
clear: both;
- 给图文区域的容器设置
overflow: hidden;
自动闭合浮动
例如：
.content-wrapper {
overflow: hidden; /* 包含内部浮动元素 */
}3. 实现右对齐图文混排
若希望图片靠右，文字在左侧环绕，只需调整浮动方向。
.float-right {
float: right;
margin-left: 15px;
margin-bottom: 10px;
width: 150px;
}此时图片靠右，文字从左边和下方环绕，适合文章侧边插图场景。
4. 注意事项与兼容性
虽然
float实现图文混排简单有效，但需注意以下几点：
- 始终设置图片的
width
和margin
，避免布局溢出 - 避免多个浮动元素堆叠导致错位，必要时使用清除
- 现代布局中可考虑
flexbox
或grid
替代，但float
在传统文本排版中依然实用
基本上就这些。合理使用 float 配合 margin 和 clear，就能轻松实现清晰自然的图文混排效果。不复杂但容易忽略细节。
