使用float可实现图片左浮动文字右环绕，通过设置float:left和margin-right控制布局与间距，配合clear:both清除浮动；现代推荐使用Flexbox布局，通过display:flex实现更稳定的图文排列，避免文档流问题。
要实现图片在左侧浮动，文字环绕在其右侧的效果，可以通过CSS的 float 属性来轻松完成。这种布局常用于图文混排场景，比如新闻列表、文章插图等。
使用 float 实现左图右文
将图片设置为向左浮动，文字内容自然会围绕在右侧显示：
<img src="example.jpg" style="float: left; margin-right: 15px;" width="150" height="100"> <p>这里是围绕在图片右侧的文字内容。可以是一段描述、文章正文或其他文本。只要图片设置了左浮动，并且容器足够宽，文字就会自动填充到右侧空白区域。</p>关键点说明：
- float: left; 让图片靠左并脱离正常文档流，使后续内容可以环绕
- margin-right 在图片和文字之间添加间距，避免紧贴
- 确保父容器有足够的宽度，否则可能无法看到环绕效果
- 文字内容应放在图片标签之后的HTML结构中
控制文字环绕范围
如果只想让部分文字环绕图片，可以在需要停止环绕的地方插入一个清除浮动的元素：
立即学习“前端免费学习笔记（深入）”；
<div style="clear: both;"></div>
这会强制后续内容不再环绕图片，从新行开始显示。
现代替代方案：使用 Flexbox（推荐）
对于更可控的布局，建议使用 Flexbox，避免浮动带来的文档流问题：
<div style="display: flex; align-items: flex-start; gap: 15px;"> <img src="example.jpg" width="150" height="100"> <p>这里文字在图片右侧，使用 Flex 布局实现，结构更清晰，无需浮动。</p> </div>这种方式更适合复杂或响应式设计，不会出现意外的文字环绕问题。
基本上就这些。用 float 快速实现经典图文混排，用 flex 更好地控制现代布局。根据实际需求选择合适方法即可。
