1. float 詳解

1.1. 定義

摘自w3school：float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。

註釋：假如在一行之上只有極少的空間可供浮動元素，那麽這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。

1.2. 關鍵點

從上面的定義，分析幾個關鍵點：

• float是可以獨立存在的，與position沒有關系，很多文章講解的時候，並沒有獨立講解float的功能；
• float可以作用與替換元素(img)，也可以作用以非替換元素(p, span)；
• float屬性設置了之後，元素的display性質變為block了，可以設置寬度，高度，margin, padding屬性等；
• float之後，元素還在父元素內，不會脫離父元素，left值相對的是父元素的左邊框（padding值有效）。

1.3. 示例

1.3.1. 行內元素示例

ttt

1.3.2. 塊級元素示例

ttt

[TimLinux] CSS float和position詳解