一、基础图文环绕（float 浮动实现，传统方案）
原理
给图片设置float:left/right，文字会自动环绕图片，是最早的图文混排方式。
html
![配图]()
大量正文文字内容……文字会自动在图片右侧换行环绕，实现报纸式图文排版。
·float:right：图片靠右，文字左侧环绕
·注意给图片设置外边距，避免文字紧贴图片
缺点
浮动会脱离文档流，父容器高度塌陷，需要清除浮动；无法实现图片文字垂直居中对齐。
二、现代标准：Flex 弹性图文排版（最常用）
分左右并排图文、上下图文卡片两种，无浮动塌陷，轻松实现垂直居中。
1. 左右横向图文（左图右文 / 右图左文）
css
.box {
display: flex;
gap: 20px; /* 图片文字间距 */
align-items: center; /* 图片文字垂直居中 */
}
.box img {
width: 220px;
flex-shrink: 0; /* 禁止图片缩小 */
}
.box .text {
flex: 1; /* 文字占剩余宽度 */
}
2. 上下图文卡片（上图下文）
css
.card {
display: flex;
flex-direction: column;
}
.card img {
width: 100%;
}
三、Grid 网格图文排版（复杂多图图文布局）
适合多图多文字矩阵、图文混排专栏，同时控制行列。
css
.wrap {
display: grid;
grid-template-columns: 200px 1fr; /* 图固定宽度，文字自适应 */
gap: 18px;
align-items: center;
}
四、行内图文（图片 + 单行文字对齐）
图片和文字同行，解决图片默认底部留白、文字高低错位问题
css
.img-text {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* 老式写法 */
img {
vertical-align: middle; /* 图片和文字垂直居中 */
}
五、图文排版通用美化要点
1.间距控制
使用margin/gap隔开图片与文字，避免内容拥挤；
2.图片缩放
max-width:100%，防止大图超出容器，适配移动端；
3.响应式适配
小屏幕下 flex 横向改为纵向：
css
@media (max-width:768px) {
.box {
flex-direction: column;
}
}
4.图文阴影 / 圆角
统一图片border-radius、box-shadow，提升页面美观度。
六、三种图文方案对比
| 排版方式 | 优点 | 缺点 | 适用场景 |
| ---------- | --------------- | ---------- | ------------------ |
| float 浮动环绕 | 原生文字环绕效果，兼容老浏览器 | 会高度塌陷，对齐麻烦 | 新闻段落文字环绕图片 |
| flex 弹性布局 | 居中简单、无塌陷、适配移动端 | 无法实现文字环绕 | 商品卡片、左右介绍模块、上下图文卡片 |
| grid 网格布局 | 复杂多行列图文精准控制 | 语法稍复杂 | 专栏多图文、图文矩阵页面 |
七、常用场景模板：商品卡片图文（flex）
html
![]()
浙公网安备 33010602011771号