偽元素語法：
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;width: 100px;height: 100px;background-color: green;}
.side{float:right;width: 200px;height: 200px;background-color: yellow;}
.footer{width: 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;width: 100px;height: 100px;background-color: green;}
.side{float:right;width: 200px;height: 200px;background-color: yellow;}
.footer{width: 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
- width: 除 “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>