轉行前端工程師必會-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教學-display與visible屬性介紹


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


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


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


只要5分鐘!讓你了解前端工程師跟後端工程師差別!


輕鬆轉行不卡卡!零基礎也能輕鬆學網頁前端!


前端工程師之Javascript初學者課程(22)-數學物件

arrow
arrow

    jimchen19901212 發表在 痞客邦 留言(0) 人氣()