在了解浮動屬性之前，首先我們先了解一下html中關於display屬性的相關知識。
display屬性常用的有inline, block, inline-block.
inline也就是內聯的意思。 常見的html標簽中如 span, font, a, b, em 都是內聯元素。
所謂內聯，簡單理解就是不會換行的元素。
<body> <b>bold element</b> <a href="http://www.google.com">google</a> <font color='red'>red font</font> <span style="height: 230px;width:100px;">span</span> </body>
結果如下：
這個例子很簡單，也說明了inline屬性的特點，即不會換行。 頁面上4個元素的文本都是連在一起的。
這里需要注意一點。 inline元素是不支持寬、高屬性的。 如例子中的span元素設置了寬和高，但是沒有起作用。
block是“塊”的意思。 block元素與inline元素相反，它會自動換行。 常見的html標簽中如 div, form, ul, li, p, h1都是塊元素。
<body> <form name="testForm" action=""> <input type="text" name="demo"/> </form> <div> div content </div> <h1>h1</h1> <p>p</p> <ul> <li>123</li> <li>123</li> <li>123</li> </ul> <span>span!</span> <span>span!</span> </body>
結果如下：
圖中很明顯的看見，這個塊元素都默認換行了。
inline-block本文不討論。
那么有什么方法可以讓block元素變成內斂元素呢。
肯定有是的，有兩種方法。
第一種就是通過css改變塊元素的display屬性, 改成inline即可。
<body> <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;display:inline;"> div1 </div> <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;display:inline;"> div2 </div> <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;display:inline;"> div3 </div> </body>
但是由於inline屬性會忽略寬和高，因此這種方法在實際運用場合上上基本不會用的。 直接忽略！
第二種就是本文要討論的浮動屬性了。
<body> <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;float: left"> div1 </div> <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;float: left"> div2 </div> <div style="width: 40px; height: 40px; background-color: red;margin-right: 10px;float: left"> div3 </div> </body
我們可以看w3c上對浮動的說明。 點擊查看->
具體的例子這篇文章已經很詳細了。
我們看 開頭的一句話：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
說的很明確， 浮動的框會直到它的外邊緣碰到“包含框”或“另一個浮動框的邊框“為止。
我們分析一下w3c的第一個例子：
框1右浮，並且它的邊緣碰到了包含寬的邊框，因此停留在了如圖所在的位置。
再看第二個例子：
左圖框1左浮，也碰到了包含框的邊框。 由於浮動的元素脫離的文檔流，不占據空間，所以接下來框2會無視掉框1，但是由於浮動元素優先級較高，因此框2在框1的下面，被遮住了。框3由於沒有浮動，是block元素， 因此自動換行，在框2的下方。
這2個例子說明2個原理。
一， 浮動的元素脫離文檔元素， 不占據空間。 不浮動的元素會直接無視掉這個元素。
二，浮動元素浮動的依據跟包含框和附近另外1個浮動的框，碰到了就會停止下來。
這里有一個注意點：
我們先看浮動框定義的第二句話的后半句 （所以文檔的普通流中的塊框表現得就像浮動框不存在一樣）
請注意，普通流中的 "塊框" 表現得就像浮動框不存在一樣。 這里指的是塊框， 而不是內聯元素。
比如以下例子：
#container { background-color: red; padding: 10px; height: 200px; width: 200px; } .left { float: left; width: 50px; height: 50px; } .right { float: right; width: 60px; height: 60px; } .green { background-color: green; } .blue { background-color: blue; }
<body> <div id="container"> <div class="left blue"></div> <div class="right blue"></div> <span>This is inline element</span> </div> </body>
結果如下：
我們可以看到。 span這個內聯元素不會忽略兩個浮動元素的。
我們將以上代碼的span元素替換成div塊框元素。
修改后的html代碼如下：
<body> <div id="container"> <div class="left blue"></div> <div class="right blue"></div> <div style="width: 50px; height: 60px;" class="green"></div> </div> </body>
結果：
很明顯地看到，這個綠色的塊框元素忽略的浮動元素。
但是如果我們將html代碼改成如下：
<body> <div id="container"> <div style="width: 50px; height: 60px;" class="green"></div> <div class="left blue"></div> <div class="right blue"></div> </div> </body>
結果卻是這樣:
從結果可以很明顯地看出， 塊框元素在container容器中占據了第高度為60像素的那塊區域。 兩個浮動的元素都是在這塊框區域下開始渲染的。
這樣是不是違背了w3c的定義：浮動框會無視普通流中的塊框。
根據個人的理解：
這可能是由於html的渲染順序導致的。html代碼中先寫了塊框， 導致先渲染了這個塊框的區域。
之后渲染兩個浮動框， 渲染浮動框的時候發現上面已經被塊框渲染過了。 於是從塊框之后開始渲染。
我們在上個例子中container容器中最后1個div后再加1個div
<div style="width: 50px; height: 60px;" class="green"></div>
在渲染最后1個div的時候。此時發現已經有兩個浮動框， 這時候就會忽略這2個浮動框，從第一個塊框開始繼續渲染，也就跑到了第一個塊框之后的位置。
所在在w3c定義浮動的那句話有點小問題。
第二句話的后半句應該改成：
所以文檔的普通流中的塊框在浮動框渲染之后會表現得就像浮動框不存在一樣。
綜上所述，感覺浮動框並沒有脫離文檔流。
不知道個人的理解是否正確， 文中難免有一些錯誤， 希望讀者發現並指出。