使用 float 实现文本环绕：将图片设置 float: left 或 right，文本自动环绕，适用于图文混排；2. 控制范围与清除浮动：用 clear、overflow 或伪元素防止布局错位；3. 现代替代方案：Flex 或 Grid 提供更可控的复杂布局；4. 注意点：设置外边距、防塌陷、响应式调整、避免过度依赖。合理运用可提升排版美观与维护性。
浮动元素与文本环绕是CSS中常见的布局需求，通常通过float属性实现。当图片或盒子等元素设置为浮动后，周围的文本内容会自动环绕在其周围。掌握正确的处理方式，能有效提升页面排版的美观性和可维护性。
1. 使用 float 实现文本环绕
将需要被环绕的元素（如图片）设置 float: left; 或 float: right;，文本内容会自然地围绕在非浮动区域排列。
示例：
img {float: left;
margin-right: 15px;
margin-bottom: 10px;
}
此时，段落文字会从右侧和下方环绕图片。适用于图文混排、新闻文章等场景。
立即学习“前端免费学习笔记（深入）”；
2. 控制环绕范围与清除浮动
浮动元素可能影响后续块级元素的布局，导致不必要的错位。应合理使用清除浮动，避免文本无限环绕或布局塌陷。
常用方法包括：
.container::after {
content: "";
display: block;
clear: both;
}
3. 现代替代方案：Flex 或 Grid 布局
对于复杂排版，传统浮动已逐渐被更灵活的布局方式取代。若仅需简单环绕，float依然高效；但若结构较复杂，建议使用现代CSS布局。
例如用 Flex 实现类似效果：
.wrapper {display: flex;
align-items: flex-start;
}
.wrapper img {
margin-right: 15px;
}
此时文本放在另一flex项中，不会产生“环绕”但结构更可控。
4. 注意点与最佳实践
处理浮动与文本环绕时，注意以下细节：
- 始终为浮动元素设置外边距（如 margin），避免文字贴边
- 确保父容器正确包裹浮动元素，防止高度塌陷
- 响应式设计中，小屏幕可取消浮动，改为上下排列
- 避免对多个文本块过度依赖浮动环绕，增加维护难度
基本上就这些。合理使用 float 可快速实现文本环绕，结合清除浮动技巧保证布局稳定。随着CSS发展，也可根据项目需求选择更适合的布局模型。关键是理解行为原理，灵活应对不同场景。
