好文学习 ：伪类:after清除浮动的原理和方法

方法一：添加空元素

就是在浮动元素下方添加一个非浮动元素。

缺陷：这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

方法二：浮动元素的自动clearing

给父元素添加：overflow:hidde

关于为何父容器可以自动识别：由于加上overflow:hidden之后要计算超出的大小来隐藏，所以父容器会自动撑开自己把所有的子元素放进去，同时会计算浮动的子元素。

缺点：一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

方法三：使用:after伪类

:after作用是：选择器在被选元素的内容后面插入内容。

1
2
3
4
5
6
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}

“clearfix”是父容器的class名称，”content:”020”;”是在父容器的结尾处放一个空白字符，”height: 0;”是让这个这个空白字符不显示出来，”display: block; clear: both;”是确保这个空白字符是非浮动的独立区块。

缺点：:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效

解决方法：IE 6的独有命令”zoom:1;”

IE 6的独有命令”zoom:1;”，这条命令的作用是激活父元素的”hasLayout”属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。

1
2
3
4
5
6
7
8
9
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}

插一句：（还能用table的方法来创建BFC达到清除浮动的目的）
（这个方法还能防止顶部的空白崩溃–margin-top和margin-bottom重叠问题）

mark

附录：什么是hasLayout

IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。

在默认情况下，拥有Layout的元素包括：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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进行设置。