原文鏈接：http://www.cnblogs.com/jiqing9006/archive/2012/07/30/2615231.html
普通流就是正常的文檔流，在HTML里面的寫法就是從上到下，從左到右的排版布局。
例：
<div id=”01”></div><div id=”02”></div><div></div>
很顯然這是最普通的文檔流，從左到右，一個挨一個按照順序01先，02其次，03最后排列。
一旦給其中的某個DIV進行FLOAT屬性或者absolute定位（不包括static/relative，這兩個依然保持正常的文檔流），則它完全脫離文檔流，不占空間。
例：
為了能更好辨認，我分別給01綠色，02灰色，03黃色。然后再給01左浮動。結果，01脫離了文檔流，完全不占空間，所以02順勢頂替了01原來的位置，結果02被01蓋住了。
同理，absolute定位跟FLOAT一樣，脫離了文檔流，不再占原來文檔流的空間了。再舉一個大家在日常經常遇到的問題來印證—高度自適應
反復想一想，高度自適應的原理其實就是這個：
<div id=”a”> <div id=”b”>這是b</div> <div id=”c”>這是c</div> </div>
這個結構是a包住b和c，顏色不變，a的高度為自動，b的高度為100，C的高度為500。b和c都為左浮動。
很明顯a沒有被撐開了。原因是它們浮動了就不再占空間了。既然沒有空間可占，那就等於容器里沒有東西，所以不撐開。解決辦法是在黃色DIV的后面加個DIV，然后清除浮動。讓他有空間可占，自然就撐開了。試試！
清除后的效果：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
CSS 浮動
請看下圖，當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
行框和清理
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。
因此，創建浮動框可以使文本圍繞圖像：
要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨着浮動框。
為了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。
讓我們更詳細地看看浮動和清理。假設希望讓一個圖片浮動到文本塊的左邊，並且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼：
.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：
不幸的是出現了一個新的問題，由於沒有現有的元素可以應用清理，所以我們只能添加一個空元素並且清理它。
.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>
CSS clear 屬性
定義和用法
clear 屬性規定元素的哪一側不允許其他浮動元素。