浮动元素的display属性

在页面布局的时候，我们经常会将元素设置成浮动效果来解决一些实际问题，无论当前元素是块级元素还是行内元素，

似乎都有需要设置成浮动的时候，但与此同时，我们有没有想过，在元素被设置成浮动之后，他们的block属性还是和

原来的一致么？为了解决该疑问，我简单做了个小测验，如下：

//css部分

.box1 {
float: left;
width: 100px;
height: 100px;
display: block;
background: red;
}
.box2 {
float: left;
width: 100px;
height: 100px;
display: block;
background: blue;
}
.box3 {
float: left;
display: inline;
background: yellow;
}
.box4{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
background: #eee;
}
.box5{
float: left;
background: pink;
}
.box6{
float: left;
background: green;
}

//html部分

<div class="box1">我是block元素</div>
<div class="box2">我是inline-block元素</div>
<div class="box3">我是inline元素</div>
<p class="box4">我是小p</p>
<a href="#" class="box5">我是小a</a>
<span class="box6">我是span</span>

//浏览器（chrome）效果



box1---可见，原来display:block 的元素，浮动后，diaplay值没变，依然是block;



box2---由上图可知，原来display：inline-block的元素，浮动后，display为block;



box3---由上图可知，原来display：inline的元素，浮动后，display值也被设置成block;



box4---由上图可知，box4的原来block的值和box2一样，并且浮动后，block值同样也变成了block;



box5---如图可知，即便是行内元素a,在其设置浮动后，其display属性也默认变成block;



box6---同样，行内元素span在其设置浮动后，其display属性也默认变成block;

总结：无论行内元素还是块元素，被设置浮动之后，display属性值都变为block;

以上是对浮动元素的display属性的简单探索，如有不正确不合符标准的地方，欢迎指正~~