您的位置：首页 > Web前端 > CSS

CSS清除浮动(转)

2012-07-14 07:53 176 查看
“90%的CSS布局的兼容问题都是浮动布局引起的”，这是我无意中听到某位前端人员的抱怨。

某位新手朋友经常问起我浮动布局的时候该如何清除浮动，我回答过N次，但这位新手朋友好像始终记不住，总是会在这里出问题，包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确，但也反映出了前端人员在这个问题上或多或少的要纠结一番，新手会时常犯难，老手也不一定就不犯傻。

我总结了一下以往几种清除浮动的方法，发觉方法还是挺多的，那么有没有一种最优的方法可以实现一劳永逸呢？且看下面的几种方法先。

空标签法

在浮动元素后加一个空标签，空标签上定义一个清除浮动的类：

viewsourceprint?
1
<styletype=
"text/css"
>
2
.clear{clear:both;height:0;overflow:hidden;}
3
.float_left{
float
:left;}
4
.float_right{
float
:left;}
5
</style>
6
<div
class
=
"float_left"
>左浮动元素</div>
7
<div
class
=
"float_right"
>右浮动元素</div>
空标签法简单有效，对浏览器的兼容性也很不错，空标签也不一定限于div，也可以是其他的标签p、span、br，值得注意的是在标准浏览器下这个空标签必须是块级元素，比如在使用span的时候就得将它转换成块级元素(display:block)，在IE6/7下内联元素也可以。空标签法由于使用起来简单，受到广大新手朋友的青睐，我也时常为了省事，用这种办法。空标签法的缺点就是要多加一个额外的标签，这样HTML代码看起来就不够优雅，如果浮动元素较多，那么空标签也会很多。

overflow

子级元素有浮动，可以给父级元素添加一个overflow:hidden或overflow:auto的CSS属性来清除浮动。

viewsourceprint?
01
<styletype=
"text/css"
>
02
.list{list-style:none;width:300px;}
03
.listli{overflow:hidden;}
04
.lista{
float
:left;}
05
.listspan{
float
:right;}
06
</style>
07
<ul
class
=
"list"
>
08
<li><ahref=
"#"
>链接</a><span>测试</span></li>
09
<li><ahref=
"#"
>链接</a><span>测试</span></li>
10
<li><ahref=
"#"
>链接</a><span>测试</span></li>
11
</ul>
该方法可以兼容标准浏览器以及IE7+，对IE6无效。这个方法我平时用得比较多，但是也有个弊端，众所周知，使用了overflow:hidden或overflow:auto属性的CSS元素如果内部有元素要定位到外面来的话就很杯具了。

IE6/7的hasLayout

微软的IE6/7的渲染引擎都有hasLayout属性，很多兼容问题都是由此引起的，某些CSS属性触发了hasLayout也同样可以达到清除浮动的效果。结合上面提到的overflow，那么就可以实现兼容标准浏览器和IE6的清除浮动的效果。触发IE6/7的hasLayout的方法并可以用来清除浮动的方法有：

1.设置一个显式的高度或宽度(不能为auto)
2.zoom:1
3.display:inline-block(hack形式)
4.float:left/right(hack形式)
用上面无序列表的为例来清除IE6/7的浮动的话，上面列出的触发hasLayout的方法1、方法2、方法3都会有一个4px的下间距BUG，用*margin-bottom:-4px修复即可。

float

子元素有浮动，给父元素也添加一个浮动(float:left)，在标准浏览器下和IE6/7/8下都有效，但是这个父级元素浮动了又得清除父级元素的浮动，所以该方法的应用场景很受限制，不推荐使用。

:after

:after是一个伪类元素，经常与content结合使用，用来给元素的后面添加内容，该方法用来清除浮动可以兼容标准浏览器和IE8，IE6/IE7无效。

viewsourceprint?
01
<styletype=
"text/css"
>
02
.box{
03
zoom:1;
/*兼容IE6/7的清除浮动*/
04
}
05
/*兼容标准浏览器*/
06
.box:after{
07
content:
''
;
/*具体的值与清除浮动无关，尽可能的节省字符*/
08
clear:both;
09
overflow:hidden;
10
height:0;
/*0高度使其不占用布局空间*/
11
display:block;
/*设置成块级元素*/
12
}
13
.float_left{
float
:left;}
14
.float_right{
float
:left;}
15
</style>
16
<div
class
=
"box"
>
17
<div
class
=
"float_left"
>左</div>
18
<div
class
=
"float_right"
>右</div>
19
</div>
我个人理解该方法就是和空标签的原理一样，都是在后面添加一个清除浮动的元素，而该方法用的是CSS来生成“空标签”，不知道这样理解是否有误，如果哪位看客有更好的说法，望告知。

上面提到的方法都是各有优缺点，并没有一种“最优”的解决方法，可能看到这里发现有点被忽悠的感觉，只能说，清除浮动的这几种方法都要看实际的应用场合，因为HTML的结构是多变的。如果你也有清除浮动的好方法，欢迎提出，共同探讨。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航