图像默认为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，是机制。
常见错误：
- 只加
float: left，没处理后续段落“爬到图像后面去” - 用
clear: both清除浮动的位置不对，导致额外空白或布局断裂
正确做法：
- 图像加
float: left（或right），并设置margin隔开文字 - 紧接图像之后的首个文字容器（如
），加clear: left（或对应方向） - 更稳妥：用 BFC 容器包裹图文区域，例如给父 加
overflow: hidden或display: flow-rootCSS Grid / Flex 实现精准定位，彻底绕过行内逻辑
如果图像位置必须精确（比如固定在段落右侧、居中悬浮、响应式偏移），别硬调
vertical-align或浮动，直接用现代布局。推荐组合：
- 父容器设
display: grid，用grid-template-columns和place-items控制图像位置，文字放另一格 - 或设
display: flex，图像和文字作为同级子项，用align-items、justify-content、margin-auto等调节 -
绝对定位（
position: absolute）适合小范围微调（如角标、装饰图），但要确保父容器有position: relative
注意：Grid/Flex 下图像不再受行高、基线、空白符影响，但需留意响应式断点时的重排策略——比如小屏下是否要从“右图左文”改为“上图下文”。
图像位置问题本质是 CSS 布局层级的选择：想让它跟着文字走，就调好行内行为；不想它动，就把它请出行内流；要它定在哪，就用明确的定位模型接管。
- 父容器设
