浮动元素的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属性的简单探索，若有不正确不合符标准的地方，欢迎指正~~