图文混排核心是保障图文关系稳定，关键用grid-template-areas命名布局、图片设max-width:100%+height:auto、响应式按内容而非设备断点设计。
图文混排页面的核心不是“怎么好看”，而是“怎么让文字不压图、图片不撑破容器、响应时图文关系不崩”。关键在 float 已淘汰，display: grid 和 display: flex 是主力，但直接套用容易翻车。
用 grid-template-areas 控制图文位置，比纯数字定位更直观
适合固定结构的介绍页（比如左图右文 / 上图下文 / 图文交错）。用命名区域写布局，HTML 语义清晰，CSS 也容易维护。
- 每个图文单元用一个
-
grid-template-areas值里用引号包裹字符串，每行代表一行区域，空格分隔列，点（.）表示留空 - 必须给子元素加
grid-area，否则命名无效；且名字要和template-areas中完全一致 - 移动端优先：先写单列（如
"image" "text"），再用@media切双列（如"image text"）
.feature {
display: grid;
grid-template-areas: "image" "text";
}
@media (min-width: 768px) {
.feature {
grid-template-areas: "image text";
}
}
.feature__img { grid-area: image; }
.feature__content { grid-area: text; }
图片必须设 max-width: 100% 和 height: auto
否则高分辨率图或宽图会直接撑爆容器，尤其在 flex/grid 里，图片默认不缩放。
- 仅设
width: 100%不够——它会让图片强行拉伸变形 -
max-width: 100%+height: auto才能等比缩放 - 如果图片是背景图，改用
background-size: contain或cover，但语义性下降 - 别依赖
object-fit来“修图”：它只控制裁剪/填充方式，不解决溢出问题
文字环绕图片？用 shape-outside 要小心兼容性和 fallback
想实现杂志式文字绕图效果，shape-outside 是唯一原生方案，但它有硬伤：
立即学习“前端免费学习笔记（深入）”；
- 只对
float元素生效，而float在现代布局中已边缘化 - IE 完全不支持，Safari 对
clip-path形状的支持不稳定 - 必须同时设
float: left/right和shape-outside，否则无效 - 推荐 fallback 方案：小屏用上下排列，大屏用双列 grid，放弃绕图——多数业务场景下用户感知远小于加载失败或错位
响应式断点别只看设备宽度，要看内容实际需要
很多项目卡在“768px 切双列”，结果 iPad 竖屏下图文挤成窄条。真正该关注的是内容可读性：
- 正文行宽超过 80 字符就难阅读，此时即使屏幕宽，也应保持单列
- 图片最小安全宽度建议 ≥ 240px，否则细节丢失严重
- 用
minmax(240px, 1fr)替代固定像素断点，让 grid 自动适应 - 测试时关掉 Chrome DevTools 的“设备模拟”，直接缩放浏览器窗口——真实用户不会总用 iPhone 尺寸看桌面端
最常被忽略的一点：图文混排不是布局问题，是内容节奏问题。图和文之间的呼吸感，靠的是 margin 层级和字体大小阶梯，而不是花哨的 CSS 特性。