一道“简单”的题——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,如下图二；