2020年5月7日 星期四

前端工程師CSS入門必學- float浮動屬性

前端工程師入門必學的float浮動屬性,學起來吧!
前端工程師入門必學的float浮動屬性,學起來吧!

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 自己練習一次程式,才會達到最佳的學習效果!

 相關文章:
AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍
CSS教學-display與visible屬性介紹
用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎?
零基礎學習網站前端So Easy!
前端,後端,全端工程師傻傻分不清?
前端工程師Javascript入門磚-22數學物件