生活必備咖啡因程式碼-店長Yui大小事

前端工程師CSS程式碼入門教學- 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成最新愛寵 真狗會被取代嗎？
網頁前端CSS不藏私教學大公開- display與visible屬性介紹
前端工程師JavaScript入門-數學物件 
前端?後端?全端?前端工程師入門

前端工程師CSS程式碼入門教學-定位元素Positioning Elements
要設計出更複雜的網頁前端版面，前端工程師一定要知道 CSS 的全部「position 屬性」。如下面所顯示，它有很多屬性值，這些屬性值不好理解且也不好記憶，但稍一設定不好，就會讓許多 CSS 區塊若入走鐘、重疊等窘境。這些屬性一個個介紹如下，也建議各位想當前端工程師的學員們把這頁加入網頁書籤中，以便日後方便查詢。
See the Pen CSS:Position 範例 by Tedutw (@Tedutw) on CodePen.
CSS：Positioning Elements 定位元素
CSS 定位屬性（positioning properties）是用來定位元素使用。它可將一個元素置於另一個元素之後，還可以指定當某個元素的內容太大時該如何做。
所有的元素都可用 top（上）、bottom（下）、left（左） 與 right（右） 屬性來定位。但若沒事先將「定位屬性」設置好的話，以上四種屬性（top、bottom、left 與 right）皆不起作用。它們亦會依照定位方法的不同，而以不同的方式呈現。
靜態定位（position: fixed）
「靜態定位（position: fixed）」是所有 HTML 元素的預設值。當元素為「靜態定位（position: fixed）」時，會遵循「Normal flow （指從左到右、上到下的常態佈局）」來排列。
靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例，儘管我們 CSS 設定為「top: 30px;right: 5px;」（上方距離30px、右側距離50px），被靜態定位的 HTML 元素，排版仍不受這些 CSS 影響。
See the Pen position_static by Tedutw (@Tedutw) on CodePen.
固定定位（position:fixed）
固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。
不同於靜態定位，固定定位（position: fixed）的元素可由 top、bottom、left 與 right 屬性的來指定位置。我們將上一段「靜態定位（position: fixed）」的範例，其中的 CSS 「position:static」改為「position:fixed」，則排版受到「top: 30px;right: 5px;」（上方距離30px、右側距離50px）的屬性影響，如下所示：
See the Pen position_fixed by Tedutw (@Tedutw) on CodePen.
固定定位（position: fixed）的元素會從「Normal flow （從左到右、上到下的排列）」的常態佈局中移除。所以其他未設定為「固定定位（position: fixed）」的元素，仍然依照「左到右、上到下」的排列，彷彿其中不存在固定定位的元素般。而 固定定位的元素可與其他的元素重疊。
相對定位（position:relative）
所謂的「相對」，是以原本正常的位置為中心點，依照元素偏移原本位置多少而定數值。相對定位（position:relative）的元素可以結合 top、bottom、left、right 等屬性，使其元素「相對地」偏移原本該出現的位置。
如以下的例子，我們在原本的位置安插粉紅色背景的文字（文字為「相對定位」）區塊，並且設定該區塊相對於原本該出現的區塊「上方留空間 5px（top: 5px;）、 左方留空間 5px（left: 5px;）」。
See the Pen position_relative by Tedutw (@Tedutw) on CodePen.
相對位置的元素內容可移動到指定位置、也可以與其他的元素重疊。但是該元素原本該出現的正常位置，會被保留而不會消失。
相對值不能用於 table cells、columns、column groups、rows、row groups 或是 captions。
絕對定位（position:absolute）
不得不說，絕對定位（position:absolute）是網頁前端比較弔詭的定位屬性。absolute 與 relative 的行為很像，不一樣的地方在於 absolute 元素的定位是相對於父層元素的位置、relative 元素則是相對於他本該出現的位置。
當元素的 position 設定為 absolute 後，它就會看它父層的元素是否有被設定為 relative、absolute 或是 fixed，若有，則以父元素為定位的基準點；若無，則以該網頁頁面("body")的左上角為定位點置，看起來就是這張網頁的絕對位置一樣。
以下範例為兩個絕對定位（position:absolute）元素的範例，右上方的元素的父元素 position 沒有設定，因此被默認為「static」——也就是不屬於 relative、absolute、fixed 或是 inherit 的任一個，因此該元素會以整個網頁區域為定位點，從最上方往下移動 30 px、從最右方往左移動 30 px；而另一個元素的父元素 position 是 relative，因此會以父元素為定位點，從最上方往下移動 30 px、從最右方往左移動 30 px。
See the Pen position: absolute by Tedutw (@Tedutw) on CodePen.
同學們可以點擊以上範例中左上角的「HTML」與「CSS」按鈕來練習 coding。
所有的 CSS 版面配置：Positioning Elements 定位元素介紹到此結束。光看以上的解釋，會容易搞混。此時，不妨回到此章節的最前面的範例，點擊範例框左上角的「HTML 」與「CSS」按鈕來研究原始碼，並且親自練習一次這些 CSS 碼，試試各種不同的 position 屬性所呈現的效果。未來想要成為前端工程師的話，就請多練習幾遍。本系列「前端工程師課程」下一章即將介紹網頁 layout 基石之一——浮動（float）屬性。
相關文章:
AI人工智慧救地球！Google：AI 保護環境還比人類快 3000 倍
CSS教學-display與visible屬性介紹
用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎？

網頁前端CSS不藏私教學大公開- display與visible屬性介紹
前端工程師JavaScript入門-數學物件 

前端?後端?全端?前端工程師入門