本文和大家重點討論一下CSS中Float和Clear屬性的使用，一個float對象可以居左或居右，一個設置為float的對象，將根據設置的方向，左移或右移到其父容器的邊界，或其前面的float對象的邊界，而緊隨其后的非float對象或內容，則包圍在其相反的方向。

CSS中Float和Clear屬性用法

實現多欄排版的***方法是使用float屬性，float也是一個將使你受益匪淺的屬性。一個float對象可以居左或居右，一個設置為float的對象，將根據設置的方向，左移或右移到其父容器的邊界，或其前面的float對象的邊界，而緊隨其后的非float對象或內容，則包圍在其相反的方向。

以下是使用float和clear屬性的一些重要準則:

◆一個float對象，將從其置身的block級非float內容流中跳出，換句話說，如果你要將一個box向左邊float，它后面的block級非float對象會顯示到下方，inline級內容會在旁邊包圍

◆要讓一段內容從一側包圍一個float對象，這段內容必須要么是inline級的，要么也設置為相同方向的float

◆一個float對象，如果沒有設置寬度，則會自動縮成其包含的內容的寬度，因此***為float對象明確設置寬度

◆一個設置了clear屬性的對象，將不會包圍其前面的float對象

◆一個既設置了clear又設置了float屬性的對象，只有clear:left屬性生效，clear:right不起作用
 

【編輯推薦】

1. CSS float方法實現DIV CSS網頁布局三欄頁
2. DIV CSS網頁布局時合理架構CSS
3. DIV CSS建站對瀏覽器兼容性和注意事項
4. CSS2.0中page-break-after屬性用法
5. 解讀DIV CSS網頁布局中CSS無效十個原因