使用 float: left/right 实现图片文字环绕，配合 margin 优化间距；2. 通过伪元素 clear: both 清除浮动，防止容器塌陷；3. 多图并列时统一设置浮动与宽度，控制布局紧凑性；4. 响应式下用媒体查询取消浮动，避免错位，提升可读性。
在图文混排布局中，CSS 的 float 属性是一个经典且实用的工具。虽然现代布局更多使用 Flexbox 或 Grid，但在一些轻量级或兼容性要求较高的场景中，浮动依然有其价值。以下是 float 在图文混排中的常见使用技巧。
1. 图片左/右浮动实现文字环绕
最典型的图文混排是让图片靠左或靠右，文字自动环绕在另一侧。
示例：将图片设置为左浮动，文字内容自然会从右侧开始排列，并在下方回流填充。
- 使用 float: left; 让图片居左，文字右绕
- 使用 float: right; 让图片居右，文字左绕
- 配合 margin 调整图片与文字之间的间距，提升可读性
HTML 示例：
立即学习“前端免费学习笔记（深入）”；
@@##@@这里是围绕图片的文字内容……
2. 控制浮动元素的范围和清除浮动
浮动元素脱离文档流，可能导致父容器高度塌陷或后续内容错位。必须合理清除浮动。
html5全屏可拖拽的横向图片布局
下载
html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布，可以通过鼠标前后拖拽图片。当点击图片的标号数字时，隐藏所有的缩略图，在屏幕上显示当前被点击的图片放大，文本内容展示效果。
- 在图文块结尾添加一个空元素并设置 clear: both;
- 更推荐使用伪元素清除法，避免额外标签：
.content::after {
content: "";
display: block;
clear: both;
}
这样能确保图文区域完整包裹浮动元素，不影响后续布局。
3. 多图并列与文字共存布局
当需要多个图片并排出现在文章一侧时，可通过设置多个图片浮动实现紧凑排列。
- 给多张图片统一设置 float: left; 并设定固定宽度
- 控制外边距防止重叠
- 注意容器宽度，避免换行错乱
适用于产品列表、相册预览等图文穿插场景。
4. 响应式考虑与回退方案
在小屏幕上，浮动可能导致图文拥挤或错位。
- 使用媒体查询，在窄屏下取消浮动：float: none;
- 让图片居中显示，文字上下排列，提升可读性
- 结合 max-width: 100%; 防止图片溢出
基本上就这些。掌握 float 的基本用法和清除技巧，能在不引入复杂布局的情况下快速实现美观的图文混排效果。虽然它已不是首选布局方式，但在特定场景下依然高效实用。
