inline-block比float更适合对齐，因其不脱离文档流，父容器可自然撑高；支持vertical-align精确控制对齐（如top/text-bottom），避免浮动“钻空”错行，且无需清浮动、副作用更少。
inline-block 能解决 float 的高度对齐问题，但必须显式设置 vertical-align，否则默认 baseline 对齐反而更错乱。
为什么 inline-block 比 float 更适合对齐？
float 元素脱离文档流，父容器无法感知高度，导致塌陷；inline-block 仍属于文档流，父容器能自然撑高，且 vertical-align 真正生效。
- 浮动元素之间会因高度差异“钻空”，造成视觉错行；
inline-block不会——它按行框（line box）排列，矮元素右侧留白不会被后续项占用 - 所有
inline-block元素共享同一行高（由最高元素决定），便于统一控制对齐基准 - 无需清浮动、不触发 BFC、不意外裁剪下拉菜单或阴影，副作用少
vertical-align 必须显式设，不能依赖默认值
默认 vertical-align: baseline 在混合 img、button、纯文字时几乎必然错位，因为不同元素的 baseline 位置根本不同。
-
vertical-align: text-bottom最稳：把元素底边对齐到父元素font-size定义的 em-box 底边，无视内容、换行、line-height -
vertical-align: top适合顶部对齐场景，行为确定，兼容性好 - 避免用
middle：它对齐的是行框中点，受font-size、兄弟元素字体影响，响应式下极易漂移 - 若需微调，直接写像素值，比如
vertical-align: -2px，比猜middle更可控
别漏掉 font-size: 0 和 box-sizing: border-box
inline-block 元素间的 HTML 空格会被渲染为一个空白字符，产生约 4px 水平间隙；padding/margin 若未归入盒模型，也会破坏等宽计算。
- 父容器加
font-size: 0消除间隙，子项再单独设font-size（如16px）恢复文字大小 - 所有子项必须设
box-sizing: border-box，否则padding和border会让实际宽度超出预期 - 若子项含图片，建议统一设
max-width: 100%和height: auto，防止溢出容器
响应式断点里最容易忽略的一件事
媒体查询切换后，inline-block 的对齐可能突然失效——往往不是代码错了，而是忘了在新尺寸下重置父容器的 font-size 或子项的 vertical-align 值。
尤其当用 rem 或 vw 动态调整字号时，text-bottom 依然可靠，但 middle 或像素偏移值就得跟着重算。真正难调的不是 PC 端，是平板窄屏下某一行刚好两列变一列时，那个“孤零零”的项是否还和上一行对齐——这时候得检查它是否还被同一套 vertical-align 规则覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
