使用 float 实现文字环绕图片，结合 clear 或 overflow 清除浮动；2. 通过 position: absolute 与 relative 配合，在图片角落精确定位标签；3. 复合布局中 float 控制主体流，position 调整图标或遮罩；4. 注意清除浮动、定位基准及响应式适配，现代推荐 Flex/Grid，但 float 仍适用旧项目。
在网页设计中，图文混排是常见需求，尤其用于新闻、博客或产品介绍页面。通过结合使用 CSS float 与 position 属性，可以实现灵活且精准的图文布局效果。下面介绍几种实用的排版方法。
1. 使用 Float 实现基础图文环绕
Float 是实现文字环绕图片最传统的方式。将图片设置为浮动元素，文本内容会自动围绕其排列。
示例：img { float: left; margin-right: 15px; margin-top: 5px; }
这样图片靠左，文字从右侧和下方环绕。适用于文章内插图场景。注意清除浮动避免布局塌陷，可使用 clear: both; 或 overflow: hidden; 在容器上闭合浮动。
立即学习“前端免费学习笔记（深入）”；
2. 结合 Position 精确定位辅助元素
当需要在图片某个角落叠加标签（如“推荐”、“New”等），可保留 float 布局主结构，再用 position 定位小元素。
- 图片仍使用 float 布局参与文档流
- 给标签设置
position: absolute; - 父容器设为
position: relative; - 通过 top、right 等控制标签位置
这样既保持整体排版流畅，又实现局部精确控制。
3. 复杂混排：Float 搭配定位图标或装饰元素
在图文列表中，有时需要在每项左侧显示图标，文字环绕右侧内容。可用 float 排列主体，再用 position 微调细节。
应用场景：- 资讯条目左侧配图，标题和摘要环绕
- 在图片右上角添加分享按钮或收藏标志
- 多图并列时配合定位添加遮罩或角标
结构建议：外层 div 包含 img 和文本，img 使用 float，附加元素用绝对定位脱离文档流，避免影响文字流。
4. 注意事项与兼容性处理
虽然 float 和 position 配合灵活，但也需注意以下问题：
- 浮动元素可能影响后续布局，记得清除浮动
- 绝对定位元素若父级未设 relative，会相对视口或最近已定位祖先定位
- 在响应式设计中，考虑小屏幕下取消 float 改为上下排列
- 现代布局更推荐使用 Flex 或 Grid，但在旧项目维护中 float 仍广泛存在
基本上就这些。掌握 float 与 position 的协作方式，能在不依赖复杂布局模型的情况下，高效完成多数图文混排任务。关键是理解文档流与脱离流的区别，合理嵌套结构。不复杂但容易忽略细节。
