使用CSS的float属性可实现图片环绕文本效果，通过设置float:left或right使文字围绕图片排列，并用margin控制间距；为避免布局错乱，需添加clear:both清除浮动影响；在响应式设计中，可通过媒体查询在小屏设备上取消浮动，使图片独占一行，确保排版美观。
在网页设计中，让图片与文本自然结合能显著提升内容的可读性和视觉效果。通过CSS的浮动（float）属性，可以轻松实现图片环绕文本的效果，同时合理控制间距，使版面更美观。
使用 float 实现图片环绕文本
将图片设置为左浮动或右浮动后，其后的文本会自动围绕图片排列。
基本用法如下：
.img-float-left {
float: left;
margin-right: 15px; /* 文字与图片之间的间距 */
margin-bottom: 10px;
}
<p>.img-float-right {
float: right;
margin-left: 15px;
margin-bottom: 10px;
}在HTML中应用：
立即学习“前端免费学习笔记（深入）”；
<img src="example.jpg" class="img-float-left" alt="示例图片"> <p>这是一段围绕图片的文字内容。由于图片设置了左浮动，文字会从右侧和下方环绕显示。</p>
控制环绕间距与避免布局混乱
仅设置 float 可能导致后续元素错位，因此需要合理设置外边距（margin）并清理浮动。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 为图片添加左右 margin，避免文字贴边
- 设置 bottom margin 防止下一段内容过于贴近
- 使用 clear 属性结束浮动影响，例如：
clear: both;
例如，在段落结束后清除浮动：
.clearfix {
clear: both;
}响应式场景下的优化处理
在小屏幕设备上，浮动可能导致图片与文字重叠或换行异常。
可通过媒体查询调整表现：
@media (max-width: 768px) {
.img-float-left,
.img-float-right {
float: none;
margin-left: auto;
margin-right: auto;
display: block;
}
}这样在移动设备上图片独占一行，避免排版错乱。
基本上就这些。合理使用 float 搭配 margin 和 clear，再结合响应式调整，就能实现清晰美观的图文混排效果。
