浮動元素的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屬性的簡單探索，如有不正確不合符標准的地方，歡迎指正~~