图文混排可用float和inline-block实现。1. float适合文字环绕图片，但需清除浮动；2. inline-block适合模块化布局，但有间隙问题；3. 现代布局推荐Flex或Grid，兼容场景可选前两者。
在网页布局中，图文混排是常见的需求。比如文字围绕图片排列，或多个图文模块并列展示。CSS中实现这种效果，float 和 inline-block 都是传统但有效的方法。下面分别介绍它们的使用方式，并进行对比分析。
使用 float 实现图文混排
float 最初设计用于实现文字环绕图片的效果，非常适合简单的图文混排场景。
基本用法：
- 将图片设置为 float: left 或 float: right，文字内容会自动环绕在另一侧。
- 注意清除浮动，避免影响后续元素布局。
img {
float: left;
margin-right: 10px;
}
p {
/* 文字自动环绕 */
}
如果多个图文块需要横向排列，也可以对容器使用 float，但需注意父容器可能塌陷，需配合 clear 或 BFC（块级格式化上下文）解决。
立即学习“前端免费学习笔记（深入）”；
使用 inline-block 实现图文混排
inline-block 让元素既具有块级元素的特性（可设宽高），又能像内联元素一样同行排列。
适用场景：
- 多个图文模块并列显示，如产品列表、图文卡片等。
- 希望元素对齐控制更精确（如 vertical-align）。
.icon-text {
display: inline-block;
width: 200px;
vertical-align: top;
}
注意：inline-block 元素间若有换行或空格，会产生间隙，可通过以下方式消除：
- 将 HTML 标签写在同一行
- 设置父容器 font-size: 0，再单独重置子元素字体大小
- 使用 letter-spacing 负值调整
float 与 inline-block 对比
两者都能实现图文混排，但各有优劣：
- float 更适合文字环绕图片的经典排版，但脱离文档流，需清除浮动，布局控制较复杂。
- inline-block 不脱离文档流，易于控制对齐，适合模块化布局，但存在空白间隙问题，响应式处理略麻烦。
- 现代布局推荐使用 Flexbox 或 Grid，但在兼容老浏览器时，float 和 inline-block 仍是可靠选择。
基本上就这些。根据实际需求选择合适的方式：简单环绕用 float，模块对齐用 inline-block，复杂布局建议升级到 Flex。
