清理浮动的整理

清理浮动是前端工程师每天都会用到的技术,目前清理浮动的技术形形色色,另很多新手眼花缭乱。所以我就结合了几篇文章,做了一些整理。

一、为什么要清理浮动?

这里我不做细讲,请新手参考《CSS Mastery》中有关浮动的章节。

简单的讲,当我们把一个框向左浮动起来时,它就会脱离文档流,并且向左移动,直到它左边缘碰到其父框的左边缘。当我们把框浮动起来后,会出现各种问题,比如下一个非浮动元素环绕着浮动框。这时候为了正确排版,我们需要把浮动清理。

二、如何清理浮动?

1、采用div标签clear的方式

1
<div class="clear"></div>
1
2
3
4
5
6
7
8
9
div.clear {
	clear:both;
	height:0;
	line-height:0;
	margin:0;
	padding:0;
	border:0;
	overflow:hidden;
}

优点:代码量极少,复用性极高。

缺点:完全不能完美的适应语义化,不利于改版以及需求变更。

建议:初学者使用,可以让你快速的解决浮动问题。

2、采用br标签clear的方式

1
<br class="clear" />
1
2
3
4
5
6
7
8
9
br.clear{
    clear:both;
    height:0;
    line-height:0;
    margin:0;
    padding:0;
    border:0;
    overflow:hidden;
}

优点:语义化程度比第5种情况要更优;代码量极少,复用性极高。

缺点:语义化依旧不完美,不利于改版以及需求变更。

建议:初学者使用,可以让你快速的解决浮动问题。

3、采用br标签以及其自身HTML的clear属性的方式

1
<br clear="all" />

优点:语义化程度比第1、2种情况要更优;代码量最少,复用性极高。

缺点:语义化依旧不完美,不利于改版以及需求变更。

建议:引导初学者思维升级时使用,让其明白与其用classname来控制一种表现,倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现,毕竟后者的代码量更少。

4、采用伪类:after进行后续空制的高度位零的伪类层清除

1
2
3
4
5
6
7
8
/*after伪类+content方式*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

优点:结构语义化完全正确,不会产生其余的怪异问题。

缺点:IE6不支持after伪类。复用方式不当容易造成代码量急剧增大。

建议:要结合与zoom:1;舍得兼容IE6。最外层轻浮动时使用,或清晰模块化复用方式的人使用。

5、采用CSS overflow:auto的方式撑高

1
2
3
4
/* 通过overflow auto的方式 */
.overflow-auto-clear{
    overflow:auto;
}

优点:结构语义化完全正确,代码量极少。

缺点:多个嵌套后,点击最外层的轻浮动框会遭成最外层至最内层内容全选(FF);或者在mouseover造成宽度改变时会出现最外层模块有滚动条(IE)。

建议:内个模块使用,请勿嵌套。

6、采用CSS overflow:hidden的方式产生怪异适应

1
2
3
4
/* 通过overflow hidden的方式 */
.overflow-hidden-clear{
    overflow:hidden;
}

优点:结构语义化完全正确,代码量极少。

缺点:内容增多时候极易不会自动换行而内容被隐藏掉。

建议:宽度固定时使用,请勿嵌套。

7、采用display:table将对象变成table形式

1
2
3
4
/* display 的方式*/
.display-clear{
    display:table;
}

优点:结构语义化完全正确,代码量极少。

缺点:盒模型属性已经改变,可想而知奇异事件自然多得你数都数不到。

建议:如果你不想改Bug改死你的话,最好不要使用。

8、采用形式

1
2
3
4
/* display 的方式*/
.display-inline-block-clear{
    display:inline-block;
}

优点:结构语义化完全正确,代码量极少。

缺点:IE6\7只把它识别为inline,并触发了haslayout,看似效果与inline-block差不多,但还是有区别。而在能正确解析的浏览器中,父容器将变为行内元素。

建议:如果你不想改Bug改死你的话,最好不要使用。

9、浮动方式

1
2
3
4
/* float的方式*/
.float-clear{
    float:left;
}

优点:结构语义化完全正确,代码量极少。

缺点:下一个元素会受到影响,为此必须全文浮动。

建议:浮动会变得复杂,不建议使用。

10、zoom方式

1
2
3
4
/* zoom的方式*/
.zoom-clear{
    zoom:1;
}

优点:结构语义化完全正确,代码量极少。

缺点:兼容性太差。

建议:结合其他浮动清除方式使用(见下一节)。

11、height:1%方式

1
2
3
4
5
/* height:1%方式 Hides from IE-mac \*/
.clearfix {
    height: 1%;
}
/* End hide from IE-mac */

优点:结构语义化完全正确,代码量极少。

缺点:兼容性太差。

建议:结合其他浮动清除方式使用(见下一节)。

三、清理浮动进阶,处理兼容性

在这里我整理以上11种浮动清理方法在各种浏览器的效果,并作了对比。具体如下图(点击放大):

清理浮动效果比较

首先我必须把第1、2、3方案淘汰掉,因为其语义化不佳,所以我也不建议使用。至于第7方案,因为其改变了合适模型,会有很多bug,不推荐使用。而第8方案,因为父容器变成了行内元素,可能会对布局带来麻烦,不建议使用。然后是第9方案,它把父元素浮动起来,从而清理了浮动。不幸的是,父元素却又会影响到下一个元素,为此我们不得不把全文浮动起来,这样对布局很不利,所以我再把第9方案淘汰。

然后我们再看第10、11方案,实际上这两个方案是通过触发IE的haslayout,从而达到清除浮动的效果。而haslayout是IE特有的,故其他浏览器不支持。由此可以想到,把第10、11方案与其他第4、5、6方案结合使用。

接下来我们还需要具体讨论第4、5、6方案的使用。

4、采用伪类:after进行后续空制的高度位零的伪类层清除

采用这种方法清理浮动,怪异现象最少,是我最推荐的。但是由于其代码复杂,如果不考虑复用方式,将使得整个css文件冗余难懂。解决办法是,在公共css文件中专门定义一个clearfix,需要清理浮动时,直接在父容器引用即可。

5、CSS overflow:auto & 6、CSS overflow:hidden的方式

这两种方式正如其原本功能那样,在使用时需要注意其表现。一旦子元素大小超过父容器,其表现就会出现问题(隐藏或出现滚动条)。所以在使用此方式清理浮动到时候一定要在多个浏览器测试。

四、总结


看到这里,相信大家已经对清理浮动的技术有数了。清理浮动没有完美的解决方案,在日常工作中,我通常会用到第4、5方案。其中以第4方案为主,我会把它写入项目的base.css中,而第5方案,则在某些不希望在html中到处添加class="clearfix"的时候使用。然后附上第4方案完整版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}
.clearfix {
    zoom: 1;
    display: inline-block;
    _height: 1px;
}
*html .clearfix {
    height: 1%
}
*+html .clearfix {
    height: 1%
}
.clearfix {
    display: block
}

好了,以上就是我对清理浮动的整理与分析,希望能给新手带来帮助。如果文中有问题,请大家直接指出,谢谢!下面附上参考文章,如涉及到版权问题,请及时联系我。

五、参考文章

http://isd.tencent.com/?p=1122

http://guitarbean.com/topic/clearfloat/#first-start

http://www.cnblogs.com/hongru/archive/2010/10/06/1844855.html