Home Web CSS

# Float

float 用於定位和格式化內容。例如讓圖像浮動到容器的左側。

Float contains following values:

  • left - 讓元素浮動到容器的左側。
  • right - 讓元素浮動到容器的右側。
  • none - Default value, 元素不浮動。
  • inherit - 繼承父元素的浮動值。
Example - float: rightlink
img {float: right}

# Float Next to Each Other

運用 float: left 我們也可以讓元素水平排列。

Examplelink
div {
  float: left;
  padding: 15px;
}
.div1 {background: red;}
.div2 {background: yellow;}
.div3 {background: green;}

# Clear

clear 指定浮動元素旁邊的元素應該發生什麼。

Clear contains following values:

  • none - Default value, 元素不會被推到左側或右側元素下方。
  • left - 元素被推到左浮動元素下方。
  • right - 元素被推到右浮動元素下方。
  • both - 元素被推到左右浮動元素下方。
  • inherit - 從其父元素繼承清除值。

當我們要清除浮動時，應將清除值與浮動值匹配: 如果元素向左浮動，則應向左清除。

Examplelink
div1 {float: left;}
div2 {clear: left;}

# The clearfix Hack

如果浮動的元素高於容器時，將會超出邊界，我們可以用 overflow: auto 來修正。

Examplelink
.clearfix {overflow: auto;}

而現在較多人用的是以下的代碼。

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

https://www.programfarmer.com/articles/style/css-float-and-flex