題目：span標簽的width和height分別為多少？
A. width = 0px，height = 0px
B. width = 400px，height = 200px
C. width = 100px，height = 50px
D. width = 0px，height = 200px

<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>
 

效果：
div正常寬高
span{width:0;height:200px}
i{width:100px;height:50px}

• 所有元素經過浮動變為行內塊元素 -- span不是塊級元素，不支持寬高,浮動後支持寬高，height:100% 即是200px。i中絕對定位，脫離文檔流，不占父級空間，所以span的width:0;
• 上面解析：W3C中，float會使元素產生塊級框，可以理解為inline-block;但是inline-block元素之間會默認產生空白符，而flaot之間沒有。雖然float脫離了文檔流，但是div仍然是span的父元素，因此height:100%;也就是繼承了父元素div的高度200px。i設置了postion
  ，脫離了文檔流，並不影響父元素,所以span的width:0px;

一個例題：浮動引起元素變成行內塊元素-display:inline-block