在web標准的網頁中，頁面各個元素都是以標准流的方式來進行布局的。即塊元素占滿指定的寬度，不指定寬度則占滿整行（如<p>、<div>元素），內聯元素則是在行內一個接一個的從左到右排列（如<a>、<span>元素）。這種默認的布局方式使用起來簡單，但也帶來很大的局限，只能從上到下顯示內容，無法實現圖文環繞混排的效果；無法實現兩列或者多列的布局，不能很好的利用頁面空間。其實要實現上述的復雜效果，我們可以借助CSS提供的float屬性。
標准流代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>標准流文檔</title> <style type="text/css"> #header,#footer{height:50px;background:#ccc;} #content{height:300px;background:#399;} </style> </head> <body> <h3>塊狀元素示例</h3> <div id="header">頁頭</div> <div id="content">內容</div> <div id="footer">頁腳</div> <h3>內聯元素示例</h3> <a href="http://www.baidu.com">百度</a> <a href="http://www.ifeng.com">鳳凰網</a> <a href="http://www.cnblogs.com">博客園</a> </body> </html>
示例圖
float屬性的含義：
元素使用了float屬性后，可以使該元素脫離標准流本身，浮動在其他元素之上，使其不再占用原本屬於該元素的空間，這樣會導致后面的元素上移並占用原本屬於該元素的空間。
對內容塊和A標簽使用浮動屬性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>浮動元素示例子</title> <style type="text/css"> #header,#footer{height:50px;background:#ccc;} #content{background:#399;} #content{float:left;} a{float:left;width:100px;} </style> </head> <body> <h3>塊狀元素浮動示例</h3> <div id="header">頁頭</div> <div id="content">內容</div> <div id="footer">頁腳</div> <h3>內聯元素浮動示例</h3> <a href="http://www.baidu.com">百度</a> <a href="http://www.ifeng.com">鳳凰網</a> <a href="http://www.cnblogs.com">博客園</a> </body> </html>
效果圖如下
全面理解和掌握float：
1. float屬性僅對使用該屬性的元素本身以及后面的元素產生影響（后面元素會上移-->頁腳塊上移）。
2. 內聯元素使用了float屬性后就會變成塊級元素，就可以設置元素的高度和寬度(參考A標簽)。
3. float屬性一般配合后面標簽的clear屬性共同使用，以便清除float屬性帶來的對后面元素的影響。
4、使用float屬性的元素，如果未設置元素寬度，則元素寬度自動調整為適應內容的寬度（參考內容DIV--內容塊的大小未定義，則自動調整）。
范例解讀一(用於布局)
此布局中，有頁頭+內容+頁腳組成，內容中的三例都使用了float屬性，設置為float:left ，而頁腳塊使用了clear屬性，設置為clear:both;
范例解讀二(圖文混排)
要實現此布局，圖片img標簽可以使用了float屬性，設置為float:left，而旁邊的說明文字則使用p標簽，為正常布局，則自動上浮到圖片旁邊，從而實現環繞圖片的效果，而下面的發表說明可以同樣使用p標簽，附加clear屬性，設置clear：both或者clear：left都可以，這樣的話發表說明就自動在圖片之下。