float和absolute会改变元素的display

无论是内联元素还是块级元素，当为其设置float属性或position:absolute属性时，元素都会脱离文档流。同时display值将变为inline-block。

.spa{
  	width:100px;
  	height:100px;
  	background-color:yellow;
	/*  position:absolute; */
  	/*  float:left; */
}

.block{
	/*  position:absolute; */
  	/*  float:left; */
  	height:200px;
  	width:200px;
  	background:red;
  	border:1px solid green;
}

<span class="spa">spa</span>
<div class="block">块级元素</div>

当没有设置float和absolute属性时，块级元素独占一行，display为block；内联元素display为inline。 如图，块级元素可以设置宽高，但独占一行。内联元素可以在一行内显示，但是不能设置宽高。

当为元素设置设置float属性或position:absolute属性（可以试验一下），块级元素和内联元素都会脱离文档流，同时display属性都变为inline-block。此时，元素可以设置大小，并能在同一行显示。