使用float实现图文环绕时，通过float:left让图片左浮并设置margin优化间距；2. 利用clear属性或clearfix清除浮动影响范围；3. 调整垂直间距与对齐提升美观度；4. 响应式下关闭小屏浮动使图片居中独占一行，提升可读性。
当使用CSS浮动（float）让图片或元素与文字混排时，掌握一些基本技巧可以让布局更自然、可读性更强。浮动元素常用于图文环绕效果，比如文章中的插图与段落文字并排显示。
1. 基本浮动与文字环绕
将图片设置为浮动后，周围的文字会自动围绕它排列。
img {
float: left;
margin-right: 15px;
margin-bottom: 10px;
}
说明：使用 float: left 让图片靠左，文字从右侧和下方环绕。添加适当的外边距（margin）避免文字贴得太近，提升可读性。
2. 控制环绕范围
有时只想让文字在部分区域环绕，而不是整个页面内容都受影响。可以通过限制父容器或使用 clear 属性来控制。
立即学习“前端免费学习笔记（深入）”；
常见做法：
- 给不需要环绕的元素设置 clear: both，强制换行显示
- 用一个容器包裹需要环绕的内容，避免影响后续模块
.clearfix::after {
content: "";
display: table;
clear: both;
}
这个伪元素可以防止父容器塌陷，同时清理浮动影响。
3. 图片对齐与垂直间距优化
为了让图文混排更美观，注意以下细节：
- 使用 margin 调整图片与文字的距离，一般右外边距和下外边距最关键
- 考虑设置 max-width: 100% 和 height: auto 防止图片溢出
- 对小图标或内联图，也可尝试 vertical-align 配合 inline-block，比 float 更轻量
4. 响应式场景下的处理
在小屏幕上，左右环绕可能破坏阅读体验。建议在移动端关闭浮动。
@media (max-width: 768px) {
img {
float: none;
margin-left: auto;
margin-right: auto;
display: block;
}
}
这样在手机上图片独占一行，居中显示，文字不再环绕，更利于阅读。
基本上就这些。合理运用 float 搭配 margin 和清除机制，再结合响应式调整，就能实现清晰自然的图文混排效果。不复杂但容易忽略细节。
