subfig宏包可实现LaTeX中多图并排的精准布局，解决figure环境内子图对齐、独立标题、交叉引用及浮动管理等核心问题。
figure多图并排时为什么图片堆成一列？
因为figure默认是块级元素，每个figure独占一行；直接写多个figure并列，浏览器会按文档流垂直排列，不是你想要的“网格”效果。
常见错误现象：figure里套img和figcaption后，三张图横不过去，全竖着排，还带巨大上下边距。
- 别用
float硬拉——响应式下容易塌陷，且clear难控制 - 别指望
display: inline——figcaption仍是块级，会撑开换行 - 正确做法：给每个
figure设display: inline-block，并统一控制宽度和垂直对齐
示例关键 CSS：
figure {
display: inline-block;
vertical-align: top;
width: 30%;
margin: 0 1.5%;
max-width: 200px;
}
注意vertical-align: top——没有它，文字基线对齐会导致高度不一致的figure错位。
立即学习“前端免费学习笔记（深入）”；
给figure加边框后figcaption被截断或错位
figure默认样式含margin-left: 40px和margin-right: 40px，加上border和padding后，容易触发盒模型溢出，尤其在窄容器中。
典型表现：figcaption文字跑出边框、右对齐失效、小屏下内容被裁剪。
- 必须重置
margin：figure { margin: 0; }，否则左右留白+边框=实际占用超宽 -
border和padding要一起算进box-sizing：figure { box-sizing: border-box; } -
figcaption默认是块级居中，但加了border后若没设width: 100%，可能收缩导致文字左对齐
推荐基础边框样式：
figure {
margin: 0;
padding: 8px;
border: 1px solid #ddd;
box-sizing: border-box;
}
figcaption {
margin-top: 4px;
font-size: 0.875em;
color: #666;
}
figcaption放在figure开头还是结尾影响渲染吗？
不影响视觉位置——所有主流浏览器（Chrome 8+、Firefox 4+、Safari 5.1+）都把figcaption渲染在figure底部，无论它写在开头还是结尾。
但 DOM 顺序影响可访问性：屏幕阅读器先读figcaption再读img更合理，所以语义上应放前面。
- 写法推荐：
<figure><figcaption>说明文字</figcaption><img ... alt="HTML中figure多图并排 HTML中figure标签边框样式设置" ></figure> - 不要用
flex-direction: column-reverse强行反转视觉顺序——破坏语义流 - 如果需要标题在上、图在下，靠 CSS 控制即可，不用动 DOM 顺序
真正容易被忽略的是：figcaption 内容是否自包含。比如写“见上图”，打印或 RSS 场景下“上图”根本不存在——这句话单独拿出来必须能讲清意思。
