图像默认为inline元素，受行盒、vertical-align和line-height影响而移位；解决方法包括设display:block脱离文字流、用float实现图文绕排并清除浮动、或采用Grid/Flex等现代布局精准控制。
图像默认是内联元素，会参与文字流排版
HTML 中 默认是 display: inline，和文字一样在行内排列。只要周围有文字、换行或空格，它就会被挤动——不是“图像自己动”，而是整个行盒（line box）按文本流重新计算高度和基线， 的对齐方式（vertical-align）决定了它在行盒里怎么“挂”着。
常见现象：段落中插入图片后，前后文字换行，图片突然上移、下沉，甚至和文字错位。
关键控制点：
-
vertical-align值影响图像在行盒中的垂直锚点（如top、middle、bottom、text-bottom） - 行高（
line-height）变大时，若vertical-align是baseline（默认），图像底部会与文字基线对齐，但基线位置本身随字体变化，容易飘 - 父容器若有
font-size: 0或缩进、空白符（如换行、tab），也会干扰行盒尺寸
用 display: block 或 display: inline-block 脱离文字流
这是最直接的“不随文字换行移位”的解法：让图像不再参与行内布局。
立即学习“前端免费学习笔记（深入）”；
适用场景：图像作为独立内容块（如插图、图标），不需要和旁边文字混排。
实操建议：
- 加
display: block后，图像独占一行，完全不受周围文字换行影响；需配合margin控制上下间距 - 若需图像与少量文字并排（如小图标+文字标签），用
display: inline-block+ 显式设置vertical-align: middle，比默认baseline更稳定 - 注意：
inline-block元素间的 HTML 换行符会产生空格，导致意外间隙；可删换行、设父元素font-size: 0（再单独设子元素字号）或用注释消除
用浮动（float）实现图文绕排但需清除
当需要文字环绕图像（如左图右文），float 仍是简单有效的方案，但它会让图像脱离文档流，后续内容会上移——这就是“移位”的来源，不是 bug，是机制。
