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

 

转载于:https://www.cnblogs.com/lmy-ms/p/6425504.html