使用CSS的float属性可实现图文混排，如float:left让文字环绕图片右侧和下方，配合margin避免贴边，通过clear或overflow:hidden清除浮动影响布局，适用于新闻排版等场景。
浮动元素与文本混排在网页布局中很常见，比如图片环绕文字的排版效果。实现这一效果的核心是使用 CSS 的 float 属性。下面详细介绍如何操作。
1. 使用 float 实现图文混排
将一个块级元素（如图片或盒子）设置为浮动后，文本内容会自动围绕在其周围。
示例代码：@@##@@这是一段围绕图片排列的文字内容。由于图片应用了 float: left，文字会自动从右侧和下方环绕显示。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 给需要浮动的元素添加 float: left 或 float: right
- 适当添加 margin，避免文字贴得太近
- 文本所在的容器不需要特殊设置，会自然环绕
2. 控制环绕方向与范围
你可以让元素靠左或靠右浮动，从而控制文本环绕的方向。
- float: left：元素靠左，文本在右侧和下方环绕
- float: right：元素靠右，文本在左侧和下方环绕
新闻类文章中，配图常使用 float: right，主文从左侧开始，形成专业排版感。
3. 防止后续元素错位（清除浮动）
浮动可能影响后续元素的布局，需要用 clear 属性控制。
- 如果不想某个元素被浮动影响，设置 clear: both
- 或者使用现代方法：给父容器添加 overflow: hidden 来包含浮动
4. 注意事项与替代方案
虽然 float 是传统做法，但现代布局更推荐使用 Flexbox 或 CSS Grid。不过对于简单的文本环绕场景，float 依然简洁有效。
- 确保浮动元素有明确宽度，避免布局混乱
- 响应式设计中注意小屏幕下是否需要取消浮动
- 考虑使用 shape-outside 实现文字沿非矩形轮廓环绕（如圆形图片）
基本上就这些。用 float 实现混排简单直接，适合图文内容排版，掌握好 margin 和 clear 就能避免大部分问题。
