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

 

posted @ 2017-02-21 18:12  lmy_moonsky  阅读(6979)  评论(5编辑  收藏  举报