CSS Float（浮動）

CSS Float(浮動)

CSS float 屬性定義元素在哪個方向浮動，浮動元素會生成一個塊級框，直到該塊級框的外邊緣碰到包含框或者其他的浮動框為止。

什么是 CSS Float（浮動）？

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果圖像是右浮動，下面的文本流將環(huán)繞在它左邊：

彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

在這里，我們對圖片廊使用 float 屬性：

清除浮動 - 使用 clear

元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。

使用 clear 屬性往文本中添加圖片廊：

提示：如果您想要了解更多有關(guān) clear 屬性的知識，請訪問本站的CSS參考手冊：CSS clear 屬性。

更多實例

為圖像添加邊框和邊距并浮動到段落的右側(cè)

讓我們?yōu)閳D像添加邊框和邊距并浮動到段落的右側(cè)

標題和圖片向右側(cè)浮動

讓標題和圖片向右側(cè)浮動。

讓段落的第一個字母浮動到左側(cè)

改變樣式，讓段落的第一個字母浮動到左側(cè)。

創(chuàng)建一個沒有表格的網(wǎng)頁

使用 float 創(chuàng)建一個網(wǎng)頁頁眉、頁腳、左邊的內(nèi)容和主要內(nèi)容。

CSS 中所有的浮動屬性

"CSS" 列中的數(shù)字表示不同的 CSS 版本（CSS1 或 CSS2）定義了該屬性。

相關(guān)文章

CSS 參考手冊：CSS float 屬性