CSS Float

CSS float 屬性指定框是否應該浮動。

使用 CSS 浮動元素

你可以向左或向右浮動元素,但僅適用於生成未絕對定位的框的元素。跟隨浮動元素的任何元素將圍繞另一側的浮動元素流動。

float 屬性可能具有以下三個值之一:

描述
left 元素浮動在其包含塊的左側。
right 元素浮動在其包含塊的右側。
none 從元素中刪除 float 屬性。

元素是如何浮動的

浮動元素從正常流動中取出並儘可能在容納元件的可用空間中向左或向右移動。

其他元素通常圍繞浮動元素流動,除非它們的 clear 屬性阻止它們這樣做。元素水平浮動,這意味著元素只能向左或向右浮動,而不能向上或向下浮動。

img {
    float: left;
}

如果幾個浮動元素相鄰放置,如果有水平空間,它們將彼此相鄰浮動。如果沒有足夠的空間放置浮子,它會向下移動,直到它適合或者不再存在浮動元素。

.thumbnail {
    float: left;
    width: 125px;
    height: 125px;
    margin: 10px;
}

使用 clear 特性關閉 float

浮動元素之後的元素將圍繞它流動。clear 屬性指定元素框的哪些邊不允許其他浮動元素。

.clear {
    clear: left;
}

注意: 此屬性只能從同一塊中的浮動框清除元素。它不會清除元素本身中浮動子框的元素。要了解有關清除浮動的更多資訊,請參閱 CSS 對齊教程。