關於前端工程師的那些CSS技能,今天來學-浮動屬性

前端工程師口中的浮動屬性到底什麼?關於它的使用時機和使用方法,今天通通教給你~

CSS 的 float (浮動) 屬性

CSS 的 float (浮動) 屬性，是前端工程師在做網頁排版時，必用的基本語法之一。使用 CSS 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 自己練習一次程式，才會達到最佳的學習效果！

精選延伸閱讀：