为什么浮动对准基线默认是top而inlineblock对准基线是bottom?

Question

为什么浮动对准基线默认是top而inlineblock对准基线是bottom?

Answer 1

vertical-align要在IFC语境下才有意义。

float没有vertical-align一说。在它被置为float的那一刻，它的display计算值为block，同时也不在之前所在的IFC（内联格式化上下文）中了（如果它之前有在的话），它不参与行内元素的打打闹闹。相反，作为校内一霸，它还会挤压行内元素打闹的水平空间。

---

inline-block对准基线是bottom？
不是的。

display:inline-block以后，默认的vertical-align依然是baseline，它依然对齐于它所在line-box的baseline。

http://jsfiddle.net/y9w4b0ac/

or 你可以给出一个demo，我们来分析一下为何会出现这样的结果。