CSS浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的框線為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
請看下圖，當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
CSS浮動再請看下圖，當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
css浮動圖示2如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
css浮動圖示3float 屬性
在 CSS 中，我們通過 float 屬性實現元素的浮動。
如需更多有關 float 屬性的知識，請訪問參考手冊：CSS float 屬性。
行框和清理
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。
因此，創建浮動框可以使文本圍繞圖像：
css浮動圖示4要想阻止行框圍繞浮動框，需要對該框套用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。
為了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
css浮動圖示這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。
讓我們更詳細地看看浮動和清理。假設希望讓一個圖片浮動到文本塊的左邊，並且希望這幅圖片和文本包含在另一個具有背景顏色和框線的元素中。您可能編寫下面的代碼：
.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並不占據空間。這點從圖片中可以很清楚的看到，div的框並沒有包裹住圖片和文本。
那么如何讓父類包圍元素在視覺上包圍浮動子元素呢？或者，更抽象層次的說，當一個盒子內部的子盒子由於設定了float屬性導致父類盒子無法被撐開，如何撐開父類盒子呢？我們可以對某個元素使用clear:both撐開父類盒子：
css浮動圖示不幸的是出現了一個新的問題，由於沒有現有的元素可以套用清理，所以我們只能添加一個空元素並且清理它。
.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套用
這樣可以實現我們希望的效果，但是需要添加多餘的代碼。常常有元素可以套用 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>
這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助於減少或消除不必要的標記。
清除浮動
在上面的敘述中，我們遇到過父類盒子沒有被撐開的情況，這是由於子類盒子設定了float:left或float:right或兩者都有的屬性，這種情況可能會產生一些我們不希望看到的情況：
（1）、背景不能顯示
由於浮動產生，如果對父級設定了（CSS background背景）CSS背景顏色或CSS背景圖片，而父級不能被撐開，所以導致CSS背景不能顯示。
（2）、框線不能撐開
如果父級設定了CSS框線屬性（css border），由於子級里使用了float屬性，產生浮動，父級不能被撐開，導致框線不能隨內容而被撐開。
（3）、margin padding設定值不能正確顯示
由於浮動導致父級子級之間設定了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。
由於這些負面情況的出現，我們有個時候希望能清除浮動，一般有以下兩個方法：
（1）對父級設定適合高度樣式清除浮動。
（2）新引入一個空的子元素，運用clear:both樣式清除浮動。
