CSS 浮動

請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。

如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：

CSS float 屬性

在 CSS 中，我們通過 float 屬性實現元素的浮動。

如需更多有關 float 屬性的知識，請訪問參考手冊：CSS float 屬性。

行框和清理

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

因此，創建浮動框可以使文本圍繞圖像：

要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。

為了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：

這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。

讓我們更詳細地看看浮動和清理。假設希望讓一個圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼：

.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } <div >
這種情況下，出現了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
不幸的是出現了一個新的問題，由于沒有現有的元素可以應用清理，所以我們只能添加一個空元素并且清理它。
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } .clear { clear: both; }<div ><div ></div> 
這樣可以實現我們希望的效果，但是需要添加多余的代碼。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news { background-color: gray; border: solid 1px black; float: left;} .news img { float: left; } .news p { float: right; } <div >
這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然后使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助于減少或消除不必要的標記。
事實上，W3School 站點上的所有頁面都采用了這種技術，如果您打開我們使用 CSS 文件，您會看到我們對頁腳的 div 進行了清理，而頁腳上面的三個 div 都向左浮動。
CSS clear 屬性
我們剛才詳細討論了 CSS 清理的工作原理和 clear 屬性應用方法。如果您希望學習更多有關 clear 屬性的知識，請訪問參考手冊：CSS clear 屬性。
浮動和清理 實例
float 屬性的簡單應用
使圖像浮動于一個段落的右側。
將帶有邊框和邊界的圖像浮動于段落的右側
使圖像浮動于段落的右側。向圖像添加邊框和邊界。
帶標題的圖像浮動于右側
使帶有標題的圖像浮動于右側
使段落的首字母浮動于左側
使段落的首字母浮動于左側，并向這個字母添加樣式。
創建水平菜單
使用具有一欄超鏈接的浮動來創建水平菜單。
創建無表格的首頁
使用浮動來創建擁有頁眉、頁腳、左側目錄和主體內容的首頁。
清除元素的側面
本例演示如何使用清除元素側面的浮動元素。