position: absolute 和 float: left | right 会改变元素的 display 的计算值

当给一个display: inline的元素设置position: absolute 或者 float: left | right后，该元素的display的计算值会变味display: block，表现出块级元素的特性，可以为其设置width、height等属性。

下面验证一下：

html代码：

<span>我是一个span元素，display的原始值为inline</span>

1.设置position: absolute

css代码：

span {
  position: absolute;
  width: 400px;
  height: 80px;
  background-color: red;
}

在chrome中的渲染结果如下：

2.设置float: left

css代码：

span {
  float: left;
  width: 400px;
  height: 80px;
  background-color: red;
}

在chrome中的渲染结果如下：