使用float属性可实现图文环绕，通过设置float和margin控制布局与间距。例如img{float:left;margin-right:15px;margin-bottom:10px;}使文本环绕图片并保持适当距离。需注意父容器包裹浮动元素，可用overflow:hidden触发BFC，避免高度塌陷；在需要时使用clear:both清除浮动，防止文字继续环绕。合理控制图片尺寸，确保小屏幕下排版正常，从而实现美观清晰的图文混排效果。
要实现图片与文字环绕的排版效果，CSS 的 float 属性是最常用的方法。通过合理设置浮动和外边距（margin），可以让文本自然地围绕图片排列，同时避免布局错乱。
使用 float 实现图文环绕
将图片设置为浮动元素后，周围的文本会自动环绕其周围。这是实现图文混排的基础。
例如：
img {float: left;
width: 200px;
height: auto;
}
此时，页面中位于该图片之后的文本内容会从右侧和下方环绕图片显示。
立即学习“前端免费学习笔记（深入）”；
通过 margin 控制环绕间距
仅使用 float 可能导致文字紧贴图片，影响可读性。添加 margin 可以在图片和文字之间留出合适空间。
建议做法：
- 给浮动图片设置 margin-right，使文字与其保持水平间距
- 适当添加 margin-bottom，防止下一段文字挤到图片下方
- 若图片靠右，则设置 margin-left
float: left;
margin-right: 15px;
margin-bottom: 10px;
}
避免布局问题的小技巧
浮动可能引发容器高度塌陷或后续元素错位，需注意以下几点：
- 确保父容器能正确包裹浮动元素，必要时使用 overflow: hidden 触发 BFC
- 在需要清除环绕的地方使用 clear: both 防止文字继续环绕
- 控制图片尺寸不要过大，以免在小屏幕上破坏排版
基本上就这些。合理运用 float 和 margin，就能实现清晰美观的图文环绕效果，既提升可读性，又保持页面整洁。不复杂但容易忽略细节。
