使用CSS的float属性可实现文本环绕效果，将图片设为float: left或right后，文字会自动在其周围排列，配合margin调整间距，并用clear属性清除浮动对后续元素的影响。
当需要让文本围绕图片或其他元素排列时，CSS 的浮动（float）属性是最常用的方法。通过设置浮动，可以让元素脱离正常文档流并靠左或靠右对齐，周围的内容（如文字）会自动环绕其显示。
使用 float 实现文本环绕
将一个块级元素（如图片）设置为浮动后，其后的文本内容会自动在其旁边展开，形成环绕效果。
基本语法如下：
img {
float: left; /* 或 right */
margin: 10px; /* 可选：增加与文本的间距 */
}
示例 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
@@##@@这是一段描述性文字，它会自然地环绕在图片的周围。无论文字长短，都会避开浮动元素所占的空间，形成图文混排的效果。
控制环绕方向与间距
通过调整 float 值，可以控制元素是左浮还是右浮，从而改变文本环绕的位置。
- float: left; — 元素靠左，文本在右侧和下方环绕
- float: right; — 元素靠右，文本在左侧和上方环绕
添加 margin 可避免文本紧贴图像，提升可读性。
清除浮动影响
浮动可能影响后续元素的布局，导致它们也“被环绕”或位置错乱。使用 clear 属性可解决此问题。
例如，在不需要环绕的元素前插入清除：
.clear {
clear: both; /* 阻止左右两侧的浮动影响 */
}
也可以使用包含块的 clearfix 技巧防止父容器塌陷。
现代替代方案（可选）
虽然 float 是实现环绕的经典方式，但在现代布局中，flexbox 或 grid 搭配 shape-outside 可实现更复杂的环绕效果，比如沿曲线排版。
例如使用 shape-outside 创建圆形环绕：
img {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
}
基本上就这些。float 配合 margin 和 clear 能快速实现标准的文本环绕效果，适合大多数图文混排场景。不复杂但容易忽略细节。
