给span加上浮动（float：left），再给他加上行高（line-height:30px;），那么此时span的高度为30px。那么去除其浮动，它的高度就不为30px。为什么呢？暂时没想明白。
span{float：left; line-height:30px;}很简单，span是行内元素，对这种元素是不能设置宽高的。但是有两种方式能间接改变它的display：float和position。
光看你这一段CSS不能判断问题 出在哪里，
你写加上 line-height: 30px !important; 试试
float会元素block化，也就是说浮动的元素的display为block
inline元素无边界，比如两个span会混成一行，使用由外而内的取高为内容高；可以理解为inlie元素没有边界，收缩到内容边界；如果加上float，非明示指定规则会默认继承inline-block；由于flaot的取块方法，使用的是由内而外的确定边界后取高；
首先span是行内元素，其次span是非替换元素，所以不能设置宽高。你float之后，让span成块级元素，所以可以设置宽高。像img,input,textarea,select这些虽然是行内，但是是替换元素，如果是没有设置宽高，那么就是默认宽高，宽高是可以设定的。
感觉你描述的不清楚。
在有line-height:30px;属性的情况下，无论是否浮动，行高始终是30px。
如果是height:30px;在没有float属性的情况下高度属性不管用，行内元素不能设置行高。而加上float，该元素会变成块级元素，高度也就管用了。
Span默认是行内元素