CSS（三）解析盒子模型的浮動
上篇博客遺留了浮動和定位兩個問題，僅僅是對他們進行了簡單的描寫敘述，今天細致透透他們的底細，此篇為浮動篇。
浮動在這個CSS排版流行的年代發揮著越來越關鍵的數據，如同aline對定位網頁元素的重要性一樣。但它比aline更加功能強大。
float主要功能是幫助對象在網頁中對齊的。通過不同的命令使對象左右浮動，直到遇到border、padding、margin或其它對象邊緣為止。別看這簡單的浮動，卻能夠為我們的排版設計出各種靚麗的風格，以下介紹幾種。
我把它們歸為了下面兩大類：普通浮動和嵌套浮動。
普通浮動
1、float：none。默認情況下，都是none的效果。這時的網頁元素將依照他們自身的出現方式排列，通常是靠邊對齊，依照文本流運行先後順序排列。
代碼：
<span style="font-size:18px;"><!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=gb2312" />
<title>不設浮動屬性的情況</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:14px;}
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:none;/*此對象不浮動，此時對象不同意有文本流圍繞*/}
-->
</style>
</head>
<body>
<div id="box">沒有浮動</div>
<p>這就是我們介紹的沒有設置浮動，即默認情況下的浮動效果</p>
</body>
</html></span>2、float：left。
此時盒子浮動到左邊。而文字卻跑到了盒子右邊！
<!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=gb2312" />
<title>對象左浮動</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:14px;}
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:left;/*此對象左浮動，此時對象右邊同意有文本流圍繞*/}
-->
</style>
</head>
<body>
<div id="box">我如今左浮動（float:left）</div>
<p>如今是左浮動啦，看看是不是文字跑到了圖片右邊？？？</p>
</body>
</html>3、float：right。盒子浮動到右邊，文字詭異地跑到了左邊！
<!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=gb2312" />
<title>對象左浮動</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:14px;}
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; text-align: center; line-height:100px; float:left;/*此對象左浮動。此時對象右邊同意有文本流圍繞*/}
-->
</style>
</head>
<body>
<div id="box">我如今左浮動（float:left）</div>
<p>如今是右浮動啦，看看是不是文字跑到了圖片左邊？？？</p>
</body>
</html>
好了，說完了最簡單的，以下介紹下嵌套浮動。
1、負邊界浮動：浮動對象會有負邊界的情況，也就是浮動對象可能會漂浮到其所在父對象外邊去。這有點像絕對定位的效果，但又與絕對定位不同，它還能影響它所在地方的文本流，請用標準瀏覽器FF看以下代碼效果：
<span style="color:#000000;"><!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=gb2312" />
<title>浮動對象有負邊界的情況[請用標準瀏覽器查看]</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:50px; font-size:12px;}
#box {background-color: #66CCFF; height: 100px; width: 300px; border: 1px solid #66CCCC; }
#box2 {background-color: #33CC99;margin:-10px 10px 0px 0px; height:20px; width: 100px; border: 1px solid #336666;float:right;}
-->
</style>
</head>
<body>
<div id="box">
<div id="box2">負邊界浮動效果怎樣？</div>
右上方小盒子邊界是margin:-10px 10px 0px 0px;，folat:right，這個效果還不錯吧，這可不是用相對、或者絕對定位做出來的，部分文字還有圍繞效果。假設在上面小盒子輸標題，在這大盒子內部輸內容，大家能夠舉一反三，多做出另外相似的效果來。</div>
</body>
</html>
</span>
2、浮動子盒子寬度>常規父盒子。假設較寬的子盒子設置了浮動，在較窄的常規父盒子中會呈現出什麽樣的效果？
答案：浮動的子盒子不會影響到父盒子的寬度，超過的部分會越到父盒子外面。但不會影響到外邊文本流的移動。而是覆蓋在外邊文字上邊的。請用標準瀏覽器FF看以下代碼效果：
<!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=gb2312" />
<title>子級元素寬大於父級的元素中寬的情況[請用標準瀏覽器查看]</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:10px; font-size:12px;}
#box {background-color: #66CCFF; margin-left:200px; height: 100px; width: 300px; border: 1px solid #66CCCC; float:left;}
#box2 {background-color: #33CC99; height: 30px; width: 500px; border: 1px solid #336666;float:right;}
-->
</style>
</head>
<body>
<div id="box">我如今左浮動（float:left）。我的寬小於子盒子。但它不會把我撐開，同一時候我設置了一定的左邊界，目的是方便看到子盒子越出去的情況
<div id="box2">我是子盒子，我的寬比父級要大。同一時候我的浮動是folat:right,所以右邊靠在父級盒子的右邊。而寬於父盒子的部分在大盒子左邊越出。</div>
</div>
<p>此時，是子盒子寬度大於父盒子</p>
</body>
</html>
3、浮動子盒子高度>常規父盒子。
同上，浮動的子盒子高度若是超過了常規的父盒子。我們又想讓父盒子能自己主動適應子盒子高度的變化，該怎麽辦？
答案：我們能夠在父級內。浮動子盒子後邊清除浮動，即<div style="clear:both"></div>。請用標準瀏覽器FF看以下代碼效果：
<!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=gb2312" />
<title>高度不能自適應[請用標準瀏覽器查看]</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:5px; font-size:12px;}
.box {background-color: #66CCFF;width: 200px;border: 1px solid #66CCCC;}
.box2 {background-color: #33CC99;margin-right:20px; width: 100px; border: 1px solid #336666;float:left;/*刪掉這浮動也能夠讓父級高度自適應*/}
-->
</style>
</head>
<body>
<div class="box">我是父盒子,我的高沒有設定,可是我的子盒子高過我時,在標準瀏覽器中我的高不能自適應。
<div class="box2">
這個盒子是小盒子，它沒有設定高度屬性，其高度是隨裏面的文字的加多而自己主動升高的，可是當它的高度超過父級盒子時，在標準瀏覽器中並沒有把父級撐高。這樣的情況與上面講的子級寬度超過父級的元素中是一樣的。可是這樣的高度自適度常是我們須要的，怎樣做到讓高度自適應呢，常見的辦法是在父級內增加下面樣式：<div style="clear:both"></div>清除掉與其同級小盒子的浮動。
</div>
<!--<div style="clear:both"></div>去除這裏的凝視再看看，這樣父級盒子的高級就能夠自適應了-->
</div>
</body>
</html>
註意：設置浮動對象是，一定要為其設定一個寬度，不然會有意想不到結果。即沒有設定寬度而又沒有內容的對象浮動後寬度會趨近於0。
以下順帶著說一下Clear吧。即清除的應用，他們二者是緊密相關的。
有時候我們浮動會帶給我們額外的困擾，如牛腩新聞公布系統中的頁腳塊footer。隨著內容區浮動的應用會使其跟著左浮動跑到右邊，而我們想讓其單獨作為一行出如今最下邊，這時就不得不用一個clear:both了。
另外，我們還能夠利用它做出不同的浮動效果。如我們能夠讓一段文本流兩遍出現浮動或者橫排變豎排（清除左浮動就可以）：
例：一段文本流兩遍出現浮動。
<!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=gb2312" />
<title>讓對象兩邊都有浮動對象存在</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:10px;font-size:15px;}
.box1 {background-color: #33CC99; height:300px; width: 100px; border: 1px solid #336666;float:left;}
.box2 {background-color: #33CC99; height:300px; width: 100px; border: 1px solid #336666;float:right;}
#clearF {
clear:none;/*試著改變清除方式left/right/both再看看執行效果*/
background-color: #66CCFF;
}
-->
</style>
</head>
<body>
<div class="box1"></div>
<p> 有時候我們浮動會帶給我們額外的困擾，如牛腩新聞公布系統中的頁腳塊footer，隨著內容區浮動的應用會使其跟著左浮動跑到右邊，而我們想讓其單獨作為一行出如今最下邊。這時就不得不用一個clear:both了。
</p>
<div class="box2"></div>
<p id="clearF">有時候我們浮動會帶給我們額外的困擾。如牛腩新聞公布系統中的頁腳塊footer。隨著內容區浮動的應用會使其跟著左浮動跑到右邊。而我們想讓其單獨作為一行出如今最下邊。這時就不得不用一個clear:both了。有時候我們浮動會帶給我們額外的困擾，如牛腩新聞公布系統中的頁腳塊footer，隨著內容區浮動的應用會使其跟著左浮動跑到右邊，而我們想讓其單獨作為一行出如今最下邊，這時就不得不用一個clear:both了。
</p>
</body>
</html>
總結：好了，上邊介紹的不過float的幾種應用，不只限於此。但不管是float還是clear，都是排版設計的一種方式。
掌握這些技巧，是一個web有web開發基礎人員的必備知識，作為CSS+div控制的一種手段。再結合我們的牛腩新聞公布系統前臺，我們能否夠把界面設計的更有自己的風格呢？Ofcourse,yes！
CSS（三）解析盒子模型的浮動