今天在写代码的时候，遇到了这样的感觉，当元素集inline-block有内容的时候，总会有部分掉下来。代码：
主页
i{display:inline-block;width:20px;height:20px;background:url(homepage.svg)no-repeat;}span{display:inline-block;width:50px;height:20px;}这样：原因：对于inline-block元素，如果里面没有inline内联元素，或者overflow不可见，那么baseline的这个元素是它的外边距的底边，否则，它的基线是该元素包含的内容中最后一个内联元素的基线。本例中i中没有行内元素，所以基线是margin的下边缘，内容“主页”在span中，所以内容的基线（“主页”的下边缘")用作它自己的基线。方法：1、添加：i,span{vertical-align:top;}2、添加：span{overflow:hidden;}原因：之所以设置overflow:hidden可以解决这个问题，是因为overflow:hidden的设置使得它的内容生成了BFC，由于BFC之间互不影响，所以不再因为正文而丢失。作用：扩展：1.vertical-algin是应用于行内元素和表格单元格的属性，默认值为baseline。baseline是要求元素的基线与其父元素的基线对齐。2.BFC相关内容链接：BFC结论：先说这么多。