使用CSS float可实现图片与文本环绕布局，通过设置float:left或right使文字围绕图片排列，配合margin调整间距，提升可读性；多段落时默认均会环绕，可用clear:both结束环绕；右浮动时需设margin-left避免贴边；尽管现代布局倾向Flex或Grid，但float在简单场景仍实用直观。
要实现图片与文本环绕的布局，使用 CSS float 是一种经典且兼容性良好的方法。通过将图片设置为浮动元素，文字内容会自动围绕其排列。结合 margin 可以有效控制图片与文字之间的间距，使页面更美观易读。
1. 使用 float 实现图片环绕
将图片设置为左浮动或右浮动后，后续的文本会自然地环绕在图片的另一侧。
示例代码：@@##@@这是一段围绕图片的文字内容……
对应的 CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.float-left {
float: left;
}
此时文字会从右侧和下方环绕图片。
2. 用 margin 控制图文间距
仅使用 float 可能导致文字紧贴图片，影响阅读体验。添加 margin 可以在图片周围创建空白区域。
常见做法是在浮动图片上设置右边距和下边距：
.float-left {
float: left;
margin-right: 15px;
margin-bottom: 10px;
}
这样文字不会紧贴图片右侧和底部，排版更舒适。
3. 处理多段文字环绕情况
当有多段文字时，所有段落都会参与环绕。若希望只让部分内容环绕，可通过容器控制范围。
也可以使用 clear 属性阻止后续内容继续环绕：
第一段环绕文字
第二段环绕文字
这段文字不再环绕
4. 图片右浮动实现左侧环绕
将图片设置为右浮动，文字则会从左侧和下方环绕：
.float-right {
float: right;
margin-left: 15px;
margin-bottom: 10px;
}
注意此时应设置左边距，避免文字贴紧图片。
基本上就这些。使用 float 搭配 margin 能快速实现图文混排，虽然现代布局更多使用 Flex 或 Grid，但在简单场景中 float 依然实用且直观。
