前端工程師絕對不想錯過的CSS知識-浮動屬性

前端工程師絕對不想錯過的CSS知識-浮動屬性

前端工程師絕對不想錯過的CSS知識-浮動屬性
前端工程師絕對不想錯過的CSS知識-浮動屬性

 

浮動屬性在前端工程師的CSS技能中,也是有一席之地的,今天學好以後事半功倍!

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

 

延伸閱讀:

前端工程師絕對不想錯過的CSS知識-定位元素

網頁前端CSS排版屬性介紹底家:display.visible

對網站前端零基礎學習者聽好了!今天教你怎樣零基礎入門!

AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍

CSS教學-display與visible屬性介紹

用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!

AI機器狗Aibo成最新愛寵 真狗會被取代嗎?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料