css - 浮动对span高度的影响

Question

给span加上浮动（float：left），再给他加上行高（line-height:30px;），那么此时span的高度为30px。那么去除其浮动，它的高度就不为30px。为什么呢？暂时没想明白。

span{float：left; line-height:30px;}

Answer 1

首先span是行內元素，其次span是非替換元素，所以不能設定寬高。你float之後，讓span成塊級元素，所以可以設定寬高。像img,input,textarea,select這些雖然是行內，但是是替換元素，如果是沒有設定寬高，那麼就是預設寬高，寬高是可以設定的。

Answer 2

float會元素block化，也就是說浮動的元素的display為block

Answer 3

Span預設是行內元素

Answer 4

感覺你描述的不清楚。
在有line-height:30px;屬性的情況下，無論是否浮動，行高總是30px。
如果是height:30px;在沒有float屬性的情況下高度屬性不管用，行內元素不能設定行高。而加上float，該元素會變成塊級元素，高度也就管用了。

Answer 5

inline元素無邊界，例如兩個span會混成一行，使用由外而內的取高為內容高；可以理解為inlie元素沒有邊界，收縮到內容邊界；如果加上float，非明示指定規則會預設繼承inline-block；由於flaot的取塊方法，使用的是由內而外的決定邊界後取高；

Answer 6

很簡單，span是行內元素，對這種元素是不能設定寬高的。但是有2種方式能間接改變它的display：float和position。

Answer 7

光看你這一段CSS不能判斷問題 出在哪裡，
你寫加上 line-height: 30px !important; 試試