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