CSS佈局 浮動

float為定位元素該如何浮動，屬性有以下四個值，可在同一容器狀況下，使用繞文排圖上、或製作導覽列使用

none- 預設，元素不浮動
left- 元素浮動到容器的左側
right- 元素浮動到容器的右側
inherit- 元素繼承其父元素的數值

clear指定float浮動元素旁邊的元素應該發生什麼，可以有以下值

none- 預設，元素容器不會被往下推
left- 元素容器被推到左浮動元素下方
right- 元素容器被推到右浮動元素下方
both- 元素容器被推到左右浮動元素的下方
inherit- 元素從其父元素繼承值

• 如果使用浮動元素float，導致排版時對齊困難，可在預排版的元素和浮動元素float外在另用一個div包起，以下舉例。

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

• 並可合併使用 box-sizing: border-box; 取消padding、margin對排版的影響

CSS各種對齊

• 將塊元素水平居中需設置width後，再加margin: auto;
• 將文本水平居中元素內，使用text-align: center;
• 對齊元素使用 position: absolute; 再加上下左右: 0;
• padding、line-height也是兩個可達成對齊的元素

CSS組合器

有四種不同的組合

後代選擇器（空格）指定單一特定元素
div p
子選擇器 (>) 指定父元素內多個同樣的元素
div > p
相鄰兄弟選擇器 (+) 必須有相同的父元素
div + p
通用兄弟選擇器 (~) 指定元素下一個兄弟所有元素
div ~ p

CSS偽類

定義元素的特別狀態

a:link 未點擊時的樣子
a:visited  點擊後顯示的樣子
a:hover 滑鼠停留在元素上的樣子
a:active 點擊不放時的樣子

• :hover結合display: none;可以讓滑鼠移到指定元素時顯示隱藏的元素
• :first-child指定另一個元素的第一個子元素做樣式

文章參考 W3C