[转帖]伪类:after清除浮动的原理和方法
浮动元素容器的clearing问题
1. 问题的由来
有这样一种情形:在一个容器(container)中,有两个浮动的子元素。
<div> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> </div>
在浏览器中一运行,就会出现意想不到的结果。实际视图是子元素显示在父容器的外部。
在CSS规范中,浮动定位不属于正常的页面流(page flow),是独立定位的。所以,只含有浮动元素的父容器,在显示时不考虑子元素的位置,就当它们不存在一样。这就造成了显示出来,父容器好像空容器一样。
3.解决方法一:添加空元素
代码这样写:
<div> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> <div style="clear:both;"></div> </div>
原理是父容器现在必须考虑非浮动子元素的位置,而后者肯定出现在浮动元素下方,所以显示出来,父容器就把所有子元素都包括进去了。这种方法比较简单,但是要在页面中增加冗余标签,违背了语义网的原则。
4.解决方法二:浮动的父容器
<div style="float:left;"> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> </div>
这种方法不用修改HTML代码,但是缺点在于父容器变成浮动以后,会影响到后面元素的定位,而且有时候,父容器是定位死的,无法变成浮动。
5.解决方法三:浮动元素的自动clearing
让父容器变得可以自动”清理”(clearing)子元素的浮动,从而能够识别出浮动子元素的位置,不会出现显示上的差错。
要做到这点,只要为父容器加上一条”overflow: hidden”的CSS语句就行了。关于为何父容器可以自动识别:由于加上overflow:hidden之后要计算超出的大小来隐藏,所以父容器会自动撑开自己把所有的子元素放进去,同时会计算浮动的子元素。
代码这样写:
<div style="overflow: hidden;"> <div style="float:left;width:45%;"></div> <div style="float:right;width:45%;"></div> </div>
下面的代码参照了lifesinger的写法:
.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; }
但是,:after选择符IE 6不支持,也就是说上面的这段代码在IE 6中无效,这怎么办?
我们添加一条IE 6的独有命令”zoom:1;”就行了,这条命令的作用是激活父元素的”hasLayout”属性,让父元素拥有自己的布局。IE 6会读取这条命令,其他浏览器则会直接忽略它。
.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; } .clearfix { zoom: 1; }
8.附录 什么是hasLayout IE使用Layout概念来控制元素的尺寸和位置。
如果一个元素有Layout,它就有自身的尺寸和位置;如果没有,它的尺寸和位置由最近的拥有布局的祖先元素控制。 在默认情况下,拥有Layout的元素包括:
<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <button>, <select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee> (注意,<p>和<div>默认不拥有Layout。) 凡是具有以下CSS属性的元素,也会拥有布局: position: absolute float: left|right display: inline-block width: any value other than 'auto' height: any value other than 'auto' zoom: any value other than 'normal' (IE专用属性) writing-mode: tb-rl(IE专用属性) overflow: hidden|scroll|auto(只对IE 7及以上版本有效) overflow-x|-y: hidden|scroll|auto(只对IE 7及以上版本有效)
hasLayout是IE特有的属性,不是CSS属性。可以用JavaScript函数hasLayout查看一个元素是否拥有Layout。如果有,这个函数就返回true;否则返回false。hasLayout是一个只读属性,所以无法使用JavaScript进行设置。