＜span＞的宽高到底是多少？

<div style="width:400px;height:200px;">
   <span style="float:left;width:auto:height:100%">
    <i style="position:absolute;float:left;width:100px;height:50px;">hello</i>
   </span>
</div>

问题是span标签的width和height分别为多少?
第一次见时毫无解答思路，只瞎猜是宽100px、高200px。理由是宽由i元素撑开，高继承自父元素div200px。

先说答案，宽为0，高为200px，先看题目中考察了哪些点：

①span是行内元素，宽高的设置是无效的；
②float会使元素变成块级元素，此时span的宽高又有效了;
   应为宽0，高200px(宽度100%由内容撑开)；

③再看i元素，它是绝对定位，不占用父元素空间，那就没有内容来撑起span的width，span宽度为0；
④在去除了i元素的绝对定位后，可以很清楚的看出i撑起了span的宽度，如下图一；
⑤在恢复i元素的绝对定位后，span的宽度为0,如下图二；

position: absolute;绝对定位，会脱离文档流，使用后span里都没有元素来撑起它了怎么可能还有宽度。如果想让span看起来有宽高，那么通过display:inline-block/block;把它变成块或者行内块元素吧。然后设置width属性。