浮动元素通过float属性脱离文档流，使文本环绕其周围，常用于图文混排；设置float:left或right可实现左或右浮动，配合margin调整间距，提升可读性；使用clear:both避免后续元素错位，通过容器限制范围，并在响应式设计中取消浮动以适应小屏幕；该技术适用于文章插图、产品介绍等场景，虽现代布局多用Flexbox或Grid，但浮动仍具简洁高效优势。
浮动（float）与文本环绕是CSS中经典的布局手段，尤其适用于图文混排场景。通过让元素脱离正常文档流并向左或向右移动，周围的文本内容会自动环绕在浮动元素的周围，形成自然的阅读布局。
浮动的基本用法
使用 float 属性可以让块级元素向左或向右浮动，常见取值为 left、right 和 none。当图片设置为浮动时，文字会自动在其周围排列。
例如：
img {
float: left;
margin-right: 15px;
}
这样图片会靠左显示，文字从右侧和下方环绕它。适当的外边距可避免文字贴得太近，提升可读性。
立即学习“前端免费学习笔记（深入）”；
文本环绕的控制技巧
除了基本浮动，还可以通过以下方式优化环绕效果：
- 清除浮动影响：使用 clear 属性防止后续元素被浮动干扰，如 clear: both; 可确保新段落不与浮动元素同行。
- 限制环绕范围：将浮动元素放入容器中，并设置容器宽度，能更好控制布局结构。
- 响应式处理：在小屏幕上，可取消浮动（float: none;）使图片独占一行，避免拥挤。
实际应用场景
这种布局常用于文章中的插图排版、新闻摘要、产品介绍等需要视觉引导的内容区域。比如一段描述某款笔记本电脑的文字，旁边浮动一张产品图，用户阅读时视线自然流动，图文结合更紧密。
注意：现代布局多使用 Flexbox 或 Grid，但浮动+环绕在纯内容展示页面仍有其简洁高效的优势。
基本上就这些，掌握 float 与 margin 搭配，就能实现清晰美观的文本环绕效果。
