秋風的蕭瑟 又見湖邊木葉飛

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

 

CSS 浮動

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

float clear" alt="CSS 浮動實例 - 向右浮動的元素" src="http://www.w3school.com.cn/i/ct_css_positioning_floating_right_example.gif" real_src="http://www.w3school.com.cn/i/ct_css_positioning_floating_right_example.gif">

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

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

float clear" alt="CSS 浮動實例 - 向左浮動的元素" src="http://www.w3school.com.cn/i/ct_css_positioning_floating_left_example.gif" real_src="http://www.w3school.com.cn/i/ct_css_positioning_floating_left_example.gif">

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

float clear" alt="CSS 浮動實例 2 - 向左浮動的元素 " src="http://www.w3school.com.cn/i/ct_css_positioning_floating_left_example_2.gif" real_src="http://www.w3school.com.cn/i/ct_css_positioning_floating_left_example_2.gif">

CSS float 屬性

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

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

行框和清理

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

因此，創(chuàng)建浮動框可以使文本圍繞圖像：

float clear" alt=行框圍繞浮動框 src="http://www.w3school.com.cn/i/ct_css_positioning_floating_linebox.gif" real_src="http://www.w3school.com.cn/i/ct_css_positioning_floating_linebox.gif">

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

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

float clear" alt="clear 屬性實例 - 對行框應用 clear" src="http://www.w3school.com.cn/i/ct_css_positioning_floating_clear.gif" real_src="http://www.w3school.com.cn/i/ct_css_positioning_floating_clear.gif">

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

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

.news { background-color: gray; border: solid 1px black; }

.news img { float: left; }

.news p { float: right; }

<div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>

這種情況下，出現了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據空間。

如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：

float clear" alt="clear 屬性實例 - 對空元素應用清理" src="http://www.w3school.com.cn/i/ct_css_positioning_floating_clear_div.gif" real_src="http://www.w3school.com.cn/i/ct_css_positioning_floating_clear_div.gif">

不幸的是出現了一個新的問題，由于沒有現有的元素可以應用清理，所以我們只能添加一個空元素并且清理它。

.news { background-color: gray; border: solid 1px black; }

.news img { float: left; }

 .news p { float: right; }

.clear { clear: both; } 

 <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> <div class="clear"></div> </div>

這樣可以實現我們希望的效果，但是需要添加多余的代碼。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。

不過我們還有另一種辦法，那就是對容器 div 進行浮動：

.news { background-color: gray; border: solid 1px black; float: left; }

 .news img { float: left; }

 .news p { float: right; }

 <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>

這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然后使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助于減少或消除不必要的標記。

事實上，W3School 站點上的所有頁面都采用了這種技術，如果您打開我們使用 CSS 文件，您會看到我們對頁腳的 div 進行了清理，而頁腳上面的三個 div 都向左浮動。