Day.8 「怎麼就這樣脫離文檔流了！」 —— CSS 定位屬性 position & 浮動元素 float

「怎麼就這樣脫離文檔流了！」 —— CSS 定位屬性 position & 浮動元素 float

我們已經了解到基本的切版概念了，但前面所學的都是固定在網頁上，也就是之前所說正常的文檔流！而這一篇就要來學會更進階一點了佈局方法了，讓元素布局上更加奔放自由，脫離文檔流。

脫離文檔流

之前有大概簡單描述了，脫離文檔流，那時候舉的例子是 float ，不過這系列只會簡單迅速介紹 float 浮動元素。
而脫離文檔流的副作用就是，父容器因為內容浮動，容易導致無法撐高父容器而塌陷，如下圖父元素只剩文字可以撐高。

解決方法

解決父容器塌陷的方法有很多，我這裡簡單舉例大多數人使用的方法，不過提前劇透了下一個篇章的偽元素的概念

/* 解決塌陷問題 */
.clear::after { /* 利用 after 偽元素，在元素底下自動撐高 */
  content: ""; /* 偽元素要設定 content */
  display: block; /* 變成區塊元素 */
  clear: both; /* 清除浮動 */
}

浮動元素（float）

目前 float 浮動元素的主要功能是文繞圖功能，其他功能可以使用 position 定位元素搞定了。
如同下圖，文字都會繞過圖片，而不會被蓋過去，宛如浮在網頁上，設定值也很簡單：

float: none;，不浮動，預設值
float: left;，向父元素左上側浮動
float: right;，向父元素右上側浮動，如下圖

定位元素（position）

定位元素顧名思義，就是在網頁上進行 3 維定位，所謂的 3 維，就是除了上下左右外，還有前後的概念。

靜態定位（static）

這是所有元素的預設值，一般的文檔流，對 top 、 bottom 、 left 、 right 、 z-index 沒有作用。
藍色框代表視窗，黑色框代表父容器。

相對定位（relative）

相對定位，就是相對於原本自己位置的定位，因為是保持文檔流的狀態下移動自身位置，所以原本的位置還會保留空白，而移動的單位，可以是絕對單位（px），也可以是相對單位（%），相對單位會取父容器的大小當作參考值。
可以看出從左往右移動 100%，100% 取自父容器（黑框）的寬度做為參考值

絕對定位（absolute）

絕對定位，會被移出文檔流，優先尋找擁有非靜態定位的祖先元素進行比對偏移，當祖先元素都沒有設置定位，則以根元素<body>作為參照對象偏移。此外在高度寬度沒寫死的情況下，寬度高度預設為 auto ，絕對定位會自動填滿上下左右設定值。
可以看出當上下右都設 0 ，左設 50%，絕對定位會自動填滿視窗