日期:2009-08-08作者:woniu前面說過html的所有對象分為兩種：一種是塊狀元素（block element），另外一種是內聯元素（inline element），當然也存在可變元素，但只是隨上下文的結構確定它是塊元素還是內聯元素。（塊元素和內聯元素的區別點這查看）。css的float屬性就是改變塊狀元素（block element）的默認顯示方式，block對象設置了float屬性後，就不再獨佔一行，可以浮動在左側或者右側。float的屬性可以參照css手冊。下面給個簡單的例子說明：css代碼：

Example Source Code .left{ background-color:black; border:2px solid #333333; width:200px; height:100px;}.leftfloat{ background-color:black; border:2px solid #333333; width:200px; height:100px; float:left;}.right{ background-color:black; border:2px solid #333333; height:100px;}left和right是不作浮動的類，leftfloat向左浮動。

Example Source Code <div class="left">沒有任何浮動</div><div class="right">沒有任何浮動</div><div class="leftfloat">向左浮動</div><div class="right">浮動在右邊</div><span class="left">沒有浮動</span><span class="right">沒有浮動</span>

HTML代碼 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]第一個和第二個容器按照塊元素的默認情況，各佔據一行，沒有任何浮動。第三個和第四個容器，第三個容器浮動到了左邊，第四個浮動到了右邊。第五個和第六個容器，是內聯元素，自然的處於同一行。要說明的是：他們的寬和高也沒有按照定義的那樣，這個也是block和inline標籤的區別之一。就是inline的高度和寬度就不能像block那樣隨便設置了，他的值是固定的就是inline中文字等的大小，對他設置不起任何作用。
推薦閱讀：