码迷,mamicode.com
首页 > 其他好文 > 详细

清除浮动的常用方法

时间:2015-03-10 19:25:38      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:浮动   ie   

先说不清除浮动的效果:
技术分享
给父元素这只边框都不会把他们包裹起来,俗称高度塌陷。

然后说说几个不常用的清除浮动方法,比如:

<div style="overflow:hidden">
    <div style="float:left;"></div>
    <div style="float:left;"></div>
</div>

就是给父元素设置overflow属性的那种,具体样式就不写了;

还有这种:

<div style="">
    <div style="float:left;"></div>
    <div style="float:left;"></div>
    <div style="clear:both"></div>
</div>

这种的是在浮动元素最后加一个空的div然后给他清楚浮动,这个原理就是让它左右两边都不挨着浮动元素,所以他就钻到父元素的最下边了,但是还是在父元素内,所以就把父元素给撑起来了。不会塌陷。效果如下:

技术分享

还有:

<div style="float:left;">
    <div style="float:left;"></div>
    <div style="float:left;"></div>
</div>

给父元素也加浮动,这种方式是极不好的,会影响父元素的定位

还有一种极不好的,是给设置父元素的display属性为table。这个table属性的元素布局的时候坑太多了,所以这种清除浮动的方式是极不推荐的。

最后被大家所广泛采用的一种方式是:

    <style>
        .box{
            width:400px;
            border:red solid 1px;
        }
        .clearfix{
            *zoom:1;    
        }
        .clearfix:after{
            display:block;
            content:"";
            clear:both;
        }
        .one{
            width:100px;
            height:100px;
            background-color:yellow;
            margin:5px;
            float:left;
        }
    </style>
    <div class="box clearfix">
        <div class="one">one</div>
        <div class="one">two</div>
        <div class="one">three</div>
    </div>

用after伪类在box父元素内的最后添加一个子元素,每个dom元素都必须有display和content属性,所以要写上:

.clearfix:after{
            display:block;
            content:"";
            clear:both;
        }

注意display属性不可以写inline,因为inline撑不起父元素。
然后,ie6、7不支持伪类:after,所以我们在

    .clearfix{
        *zoom:1;    
    }

设置了zoom属性,使用来触发ie67的haslayout属性来支持:after伪类,haslayout是关于ie低版本浏览器排版的一个属性。

清除浮动的常用方法

标签:浮动   ie   

原文地址:http://blog.csdn.net/westernranger/article/details/44178471

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!