閱讀前請看 [CSS]CSS浮動float詳解（一）：标準文檔流
通過上一篇的學習中我們發現：所有元素都處于标準流之中，元素之底部始終對齊，頂部則高矮不一，實在是不怎麼美觀。
在一段文字中插入一個圖檔，就會出現如下效果：
如果圖檔多了會這樣：
是以傲嬌的工程師們發現這樣的顯示實在是太蛋t了，如果這樣就好了：
這就是大名鼎鼎的文字環繞效果。
工程師們又發現，實作文字環繞效果必須脫離标準文檔流，因為隻要處于标準文檔流中，文字和圖檔的底部就必然處于同一個水準線上。那麼問題來了，什麼叫做脫離标準文檔流呢？其實所謂的脫離文檔流是相對于文檔流而言的，不處于文檔流之中即不遵循标準文檔流的規則的，都屬于脫離文檔流。
float屬性
為了脫離文檔流，就有了float屬性。這個屬性的名字就很有意思，float是漂浮的意思，漂浮在标準文檔流之上，不受标準文檔流的控制。并且形象的說明了這個屬性的帶來的效果。
脫離文檔流的表現一：脫離文檔流後元素漂浮在文檔流之上
float屬性開啟一個新的流位于漂浮在文檔流之上，進而達到脫離文檔流的效果。如圖：
<style type="text/css">
*{
margin: ;
padding: ;
}
.div1{
float: left;
width: px;
height: px;
background-color: skyblue;
}
.div2{
width: px;
height: px;
background-color: yellow;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
脫離文檔流表現二：行内元素可以設定寬高，塊級元素不再占用一行
元素脫離文檔流後，元素永遠都不會被文檔流中的規則限制。文檔流規定，行内元素無法設定寬和高，塊級元素占用一行。脫離後，這個規則不再限制元素，代表着元素無論是塊級元素還是行内元素，都可以設定寬和高，都可以不占用一行。
脫離文檔流表現三：文本内容不會被覆寫
文本内容不會被覆寫！！！文本内容不會被覆寫！！！文本内容不會被覆寫！！！
讓我們看一下文字環繞效果的代碼：
div{
float: left;
background-color: yellow;
width: 200px;
height: 200px;
}
p{
background-color: red;
}
<body>
<div>
</div>
<p>文字</p>
</body>
我們将div浮動，p标簽是塊級标簽，不浮動。按照我們的猜想，div會覆寫p标簽的一部分，但是奇異的事情發生了：
我們發現，浮動的元素雖然處于文檔流的上方，但是并不會遮擋文本（文字圖檔連結），文本會自動浮動，形成字圍效果。
脫離文檔流表現四：子元素不會再撐出父容器的高
因為父容器元素的高度預設為包裹子元素，當子元素浮動後，脫離文檔流，子元素不再遵循文檔流中的規則，也就不遵循塊級元素行内元素的規則——是以子元素就不會再撐出父元素的高度。這樣，父元素的高度就變為了0。如圖（紅色邊框是父容器）：
脫離文檔流表現五：脫離文檔流的元素，仍然是在父元素中浮動
綠色盒子并沒有完全浮動到頂部，而是浮動到父元素的頂部。是以，浮動的元素的位置仍然會收到父元素的限制，即隻會在父元素的進行浮動。
float後産生的效果：
再來看一下文字環繞效果，這次我給圖檔加上了邊框：
我們看到文字自動的向左浮動，貼在了圖檔的右側。而且，第二行文字發現下發會有空隙繼續漂浮在圖檔右側，無論下方空隙夠不夠文字的高度。最後一行發現，左側沒有依靠，就自動漂浮到了最左側，而且，他的上方有空隙，但是他并不會向上浮動填補空隙。
讓我們用大圖感受一下：
第二行文字發現下發會有空隙繼續漂浮在圖檔右側，無論下方空隙夠不夠文字的高度：
最後一行發現，左側沒有依靠，就自動漂浮到了最左側，而且，他的上方有空隙，但是他并不會向上浮動填補空隙
盒子也同樣遵循這個效果。