css中float：left和display：inline_block的区别？

Question

a标签中有一个小图标如果把它设成display：inline_block他和a标签中的文字不对齐，
如果float设成left，他就和文字对齐了。
同样是使元素在水平排列，为什么会出现这种情况

Answer 1

float:left的元素会脱离原始的文件流，已经和你的<a>没有关系了，能对齐纯属巧合（可以预见的巧合^_^）。但是inline-block和你的<a>是在同一行的，inline-block的那个元素地位是和<a>是一样的。然后这个元素和<a>根据设置的vertical-align对齐，是整个元素其与<a>对齐，所以这个元素中的某一行时候不与<a>中文字对齐也是正常的。

从你的图看来你设置的那个inline-block应该就是一个div，它默认的vertical-align是baseline。对于内部有文本的div他的baseline是最后一行文本的baseline(不同浏览器也不太一样)，没有的就是下边缘(包括margin)，这样就导致了<a>的baseline对齐了div的baseline也就是说文字底部靠上一点点儿(baseline)对齐了div的下边缘。

想要实现对齐你可以把inline-block的元素设置vertical-align:middle，保险起见的话a也设置成这个

Answer 2

设置成 inline-block的元素需要设置对齐方式vertical-align，没有设置的话默认是baseline

你设置成float看着对齐了 实际上只是巧合 如果文本的height或者line-height不是 18px 就会不对齐

Answer 3

inline-block是使元素能在行内显示 但是又同时具有块级元素可以设置height和width的特点;
贴的代码不全，猜测可能是你设置的height:18px，使inline-block错位。

Answer 4

你将图标和文字放在一个元素中，图标是紧靠元素的左边框和上边框的，而文字有行高，与元素上边框有一定的距离。
你可以试试将元素里的行高设为 1em。