嫩嫩的程式學習紀錄 - Jim

CSS 的 float (浮動) 屬性

CSS 的 float (浮動) 屬性是前端工程師在做網頁排版時，絕對會用到的基本語法之一。使用 CSS float 浮動屬性，可以將一個元素往左移或是往右移，並同時允許其他元素圍繞它（例如文繞圖、圖繞文等）。

float 浮動屬性的使用時機

使用 <div> 等區塊元素排版時，預設的排列方式都是由左至右、由上至下。但如果想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時，就需要使用 float 屬性。

如下方例子，若我們使用一般的 div 區塊元素時，則所有的區塊就整齊的由左上出來，一個 <div> 區塊就佔用了一行。（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）

See the Pen Float-example-1 by Tedutw (@Tedutw) on CodePen.

承上例，如果在 CSS 中加一個「float: left;」，則結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法）：

See the Pen Float-example-2 by Tedutw (@Tedutw) on CodePen.

這是因為「float」屬性使 div 區塊元素「漂浮」起來，不再形成 div 區塊占滿整行的情況

承上例，假設把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right;」，則所有的區塊就會由右側開始「飄」出來，結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）：

See the Pen Float-example-3 by Tedutw (@Tedutw) on CodePen.

CSS 浮動屬性有三個參數：left、right 與 none。left 與 right 顧名思義，就是控制區塊由左側還是右側浮出用的，如上方兩個例子所示。而 none 就是不使用浮動參數的意思。

下方是另一個文繞圖排版的例子，就是文字的部分「不」設定 float 屬性，但是在 logo 圖片的部分使用浮動屬性「float:right;」，文字的部分則不使用浮動屬性。（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）

See the Pen Float-example-4 by Tedutw (@Tedutw) on CodePen.

若前端工程師想要做出兩欄或多欄的網頁，則可以善用 float 屬性搭配寬度需要進行初步的排版。

以下範例為兩欄的排版示例。兩個欄位視為兩個區塊， float 屬性都設定為「left」，左欄寬度為 20%；右欄為 80%：

See the Pen Float-example-5 by Tedutw (@Tedutw) on CodePen.

網路上常常有人說：前端工程師的網頁 layout 基石除了本章介紹的浮動（float） 屬性之外，還有下一張會介紹的清除浮動（clear）。想當前端工程師的各位同學們請先把本章再複習一次，並親自使用 codepen 自己練習一次程式，才能達到最佳的學習效果哦！