伪元素语法：
selector:pseudo-element {property:value;}
1.first-line伪元素：向文本的首行设置特殊格式；
注意： 只能用于块级元素；
可应用于first-line伪元素的属性：font,color,background，word-spacing，letter-spacing，text-decoration，
vertical-align，text-transform，line-height，clear
2：first-letter：向文本的首字母设置特殊样式；与first-line类似，不同：vertical-align只能当float为none时有效。
3.before伪元素：在元素的内容前面插入新内容；
4.after伪元素：与before相似，作用是在元素内容后面插入新内容；
另：可以用before或者after清除浮动（不被IE6/IE7支持）：
1）
.clearDiv{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
*html .clearDiv{
zoom:1;/*IE6*/
}
*+html .clearDiv{
zoom:1;/*IE7*/
}
（有一篇文章说到称之为清除浮动是不确切的，清除浮动是指clear,对应的css中的属性是：clear:left|right|both|none；闭合浮动：是浮动元素闭合，从而减少浮动带来的影响。）
说到这里就讲一下浮动的原理吧：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）因此需要闭合浮动元素，使其包含框表现出正常的高度。
除了上面的伪元素关闭浮动元素的方法，下面还有几种：
2）添加额外标签：在浮动元素的父元素内容最后插入一个空标签div：
该方法虽然简单易懂但是会增加html代码的冗余度，从语义化的角度来看是不合理的；
3）使用br标签和其自身的html属性：小众化方法，br有clear=“all | left | right | none”属性
<html>
<head>
<style>
.main{float:left; 100px;height: 100px;background-color: green;}
.side{float:right; 200px;height: 200px;background-color: yellow;}
.footer{ 300px;height: 300px;background-color: pink;}
.warp{background-color: purple;overflow:hidden; *zoom:1;}
</style>
</head>
<body>
<div class="warp" id="float2">
<div class="main left"></div>
<div class="side left"></div>
<br clear="all" />
</div>
<div class="footer"></div>
</body>
</html>
这个方法比空标签语义稍强，代码量也少，但是同样有违结构和表现的分离；
4）父元素设置overflow:hidden （IE6中还需要除法hasLayout，eg:zoom:1）
<html>
<head>
<style>
.main{float:left; 100px;height: 100px;background-color: green;}
.side{float:right; 200px;height: 200px;background-color: yellow;}
.footer{ 300px;height: 300px;background-color: pink;}
.warp{background-color: purple;overflow:hidden; *zoom:1;}
</style>
</head>
<body>
<div class="warp" id="float3">
<div class="main left"></div>
<div class="side left"></div>
</div>
<div class="footer"></div>
</body>
</html>
此方法不存在结构化和语义问题并且代码量也少，但是内容增多时不会自动换行导致内容被隐藏，无法显示需要溢出的元素；
5）父元素设置overflow:auto：IE6需要触发hasLayout，演示和3差不多
不存在结构和语义化问题，代码量极少；但是多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等；
6）父元素也设置float：不存在结构和语义化问题，代码量极少，但使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
7）父元素设置display：table：结构语义化完全正确，代码量极少但是盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
触发hasLayout的条件：
- position: absolute
- float: left|right
- display: inline-block
- 除 “auto” 外的任意值
- height: 除 “auto” 外的任意值 （例如很多人清除浮动会用到 height: 1% ）
- zoom: 除 “normal” 外的任意值
- writing-mode: tb-rl
关于清除浮动的更多详细：http://blog.csdn.net/kongjiea/article/details/17614729
============再次补充伪元素的使用例子：：tr:nth-child(even | odd | an+b)==============
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。再分别设置an+0 至 an+b的样式；
请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>表格</title> <style type="text/css"> .tbl{ border: 1px solid #ccc; } .tbl tr td{ border: 2px solid blue; } .tbl tr:nth-child(even){ background-color: white; } .tbl tr:nth-child(odd){ background-color: gray; } .tbl tr:hover{ background-color: yellow; } </style> </head> <body> <table class="tbl"> <tr> <td>First row</td> </tr> <tr> <td>Second row</td> </tr> <tr> <td>Third row</td> </tr> <tr> <td>Fourth row</td> </tr> <tr> <td>Fifth row</td> </tr> </table> </body> </html>