浮动（float）可实现文字环绕图片效果，通过float:left/right使元素脱离文档流并让文本环绕，配合margin调整间距，使用clear:both防止布局错乱，适用于文章页等图文混排场景，但整体布局推荐Flex或Grid。
当使用CSS实现图文混排时，浮动（float）是最基础且实用的技术之一。通过让图片或其他元素向左或向右浮动，周围的文本内容会自然地环绕在它的周围，形成常见的“文字环绕图片”效果。虽然现代布局更多使用Flexbox或Grid，但在某些场景下，浮动依然有其独特价值。
理解float属性的基本用法
float属性允许元素脱离正常的文档流，并向指定方向移动，直到其边缘紧贴包含块或另一个浮动元素的边缘。
常用取值包括：
- float: left; 元素靠左浮动，文本从右侧和下方环绕
- float: right; 元素靠右浮动，文本从左侧和下方环绕
- float: none; 默认值，不浮动
示例代码：
立即学习“前端免费学习笔记（深入）”；
<img src="example.jpg" style="float: left; margin: 10px;"> <p>这是一段围绕图片的文字内容。由于图片设置了向左浮动，这段文字会自动填充在图片的右侧和下方。</p>
控制环绕间距与布局清晰性
仅设置浮动还不够，为了让文本与浮动元素之间有合适的视觉距离，应配合使用margin属性。
建议做法：
- 为浮动元素添加左右margin，避免文字贴边
- 上下margin可防止与其他块级元素拥挤
- 通常设置
margin: 10px;即可获得良好视觉效果
例如：
img {
float: right;
width: 150px;
margin: 10px 0 10px 15px;
}
这样图片靠右显示，文字从左侧和下方环绕，并留出右侧15px的空隙，阅读更舒适。
清除浮动避免布局错乱
浮动元素可能影响后续内容的排列，比如后面的标题或段落“钻到”浮动元素下方。这时需要使用clear属性来阻止这种行为。
常见方法：
- clear: both; 阻止元素两侧出现浮动元素
- 可在下一个块级元素上直接设置，或插入一个空元素并清除浮动
示例：
<div style="clear: both;"></div>
或者使用CSS伪类方式更优雅地清除：
.container::after {
content: "";
display: block;
clear: both;
}
实际应用场景与注意事项
浮动+文本环绕常用于文章页、新闻详情、产品介绍等需要图文混排的场合。
需要注意的几点：
- 确保图片尺寸适中，避免过大导致页面断层
- 响应式设计中，小屏幕可考虑取消浮动，改为上下排列
- 现代开发中可用
shape-outside实现更复杂的环绕形状（如圆形、多边形） - 不要滥用浮动进行整体页面布局，推荐使用Flex或Grid代替
基本上就这些。掌握float与文本环绕，能快速实现简洁美观的内容排版，是前端实践中值得保留的基础技能。
