徹底弄懂CSS盒子模式三(浮動的表演和清除的自述)
1.徹底弄懂CSS盒子模式一(DIV排版快速入門)
2.徹底弄懂CSS盒子模式二(導覽列執行個體)
3.徹底弄懂CSS盒子模式四(絕對位置和相對定位)
一、下面請看float的精彩表演，有請。
大家好,我是float,歡迎訪問CSS家族,在CSS家族中,在當今CSS排版流行的年代,我可扮演著重要的角色哦。因為我的工作對網頁設計人員很有用，就像之前align協助你們定位網頁元素一樣重要，但是我的功能似乎比align強多了。接下來我將現場給你示範我的絕活，看細心點哦。當然也許我一下子不能把我所有的技巧給大家示範，因為有些技巧本人也許一下子記不起來了，那就請那些對我比較瞭解的人來幫我補充補充囉，比如版主等等啊。
先講一下我主要的工作，我主要是協助對像在網頁中對齊的，一旦我發出float:left或float:right命令，被我浮動的對像就會向左或向右移動直到遇到邊框( border) 、填充( padding） 、邊界( margin ）或者另一個塊對象的邊緣為止，當然也有一些看起來較特殊的情況，比如被我浮動的元素設定了一個負邊界（margin）的時候。我還可以讓文字流環繞在被我浮動的對像周圍,這也是我的特色。另外要注意的一點是，最好給浮動物件設定一下寬度，不然會出現一些意想不到的麻煩。我主要浮動類型有兩種,它們是float:left和float:right,當然我還有一個功能是float:none,不過float:none比較少用，這也是我的預設值，有時也是很有用的，我等一下會講的。下面我開始表演了,我的舞台可以是IE(Internet Explorer),或者FF(Firefox),但是有些技巧我一定要在標準的舞台中,如FF中才能表出來做的,請注意看我的說明,不然你用IE是看不到效果的。
1.我不動聲色（我的屬性不設定的時候），即：float:none,或者樣式中不寫這一項時，網頁中的元素將按照它們自身的出現方式排列，一般是靠邊對齊，先出現的排在前邊,下面運行框是DIV先出現，P後出現，所以P排在DIV後面，注意看DIV的右邊還有很多空間，但是P的文字不會跟在它的右邊去。看：
<!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>什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最後從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。</p></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
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>什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最後從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。</p></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
哈哈，看我表演了幾項是不是開始覺得有點煩了，那麼簡單無聊的，那下面就給你表演幾項特別的，但願你不是IE的崇拜者，因為下面效果你用IE是看不到效果的，請用像FF那樣的標準瀏覽器來運行代碼框或測試吧。
4．浮動物件有負邊界的情況，這時浮動物件可能會漂浮到其所在父物件外邊去，這有點像絕對位置的效果，但又與絕對位置不同，它還能影響它所在地方的文字資料流，請用標準瀏覽器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: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">margin-top:-15px</div>右上方小盒子邊界是margin:-10px 10px 0px 0px;，folat:right，這個效果還可以吧，這可不是用相對、或者絕對位置做出來的哦，部分文字還是有環繞效果。如果在上面小盒子輸標題，在這大盒子內部輸內容，這種類型的網頁版面效果還可以的，大家可以舉一反三，多做出另外類似的效果來。</div></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
5．如果一個較寬的子盒子在一個較窄的父盒子中擁有浮屬性，子盒子漂浮後不會影響到父盒子的寬度，子盒子超出父盒子的部分會越到父盒子外面，但越出父盒子外的部分不會引起外邊文字資料流的移動，而會直接覆蓋在外邊文字上面的，請用標準瀏覽器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>什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最後從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。</p></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
6．如果父盒子不設定高度或者高度為自動，而其子盒子設定了浮動，並且高度超過了父盒子，在標準瀏覽器中，父盒子高度是不能自適高度，但是這種高度自適應常是我們需要的，如何做到讓高度自適應呢，常見的辦法是在父級內，浮動子盒子後邊加入以下代碼：<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>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
7.下面這個例子很重要，可以說明浮動元素的很多特性，大家運行代碼框後再手動調整瀏覽器視窗大小，看版面有什麼變化，下面我給你解釋常見的問題和技巧。
<!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; border: 1px dashed #000000;}.box {background-color: #33CC99; height:100px; width: 100px; border: 1px solid #336666;float:left;}--></style></head><body><div class="box"></div>什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)， <div class="box"></div>CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；<div class="box"></div>邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，<div class="box"></div>現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最後從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。<div class="box"></div>什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)， <div class="box"></div>CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；<div class="box"></div>邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，<div class="box"></div>現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最後從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。<div class="box"></div><div style="clear:both"></div></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
（1）在一個盒子內的浮動對像左右浮動時，它的左右邊界不一定就會靠在父物件的內補白上或邊框上，上面9個盒子都是左浮動的，但在視窗最大化的情況下，只有第一個盒子和最後一個盒子的左邊界靠在父盒子左邊內側。
（2）浮動物件之間不會重疊。上面有講到浮動對像越出外邊去的情況，那麼一個浮動盒子又會不會越到另一個浮動物件上面去呢，實質上它們是不會重疊的，即使用了負邊界看起來像重疊在一起。
（3）並排的同一浮動方向的對像在一行中放不下時，可以自動換行。大家在瀏覽下面代碼時，改變一下瀏覽器視窗，就會看到我所說的情況。
（4）浮動盒子在本文流中出現的位置會影響它的水平浮動位置，就像下面運行框效果，那些盒子並不是緊跟著一起出現的，之間有文本存在，所以結果造成所有等高的盒子並不是同一直線排列出現，而變成有一定的梯度。如果兩個盒子之間文字資料流區塊高度大於前邊浮動元素高度時，緊接著的同一浮動方向的對象將會被自動換行顯示。在下面執行個體中，如果調整瀏覽器視窗盡量小時，所有盒子可能會出現全部靠在父盒子左邊的情況，因為縮小瀏覽器同時，盒子右邊的文字資料流高度隨之增高。
可見不要小看我浮動，熟練掌握我將會給你排版帶來很多意想不到效果哦。
8．再講一則注意事項，在開始時我不是有說過要給浮動物件設定一個寬度的，不然會有意想不到結果，即沒有設定寬度而又沒有內容的對象浮動後寬度會趨近於0。請大家自行修改下面代碼我注釋前邊的寬（只能刪其中一個），測試看看效果就知道怎麼回事了。
<!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>要給浮動元素一個寬度，不然盒子在沒有內容情況下寬度將趨向0</title><style type="text/css"><!--* {margin:0px; padding:0px;}body {margin:5px; font-size:12px;}.box {background-color: #66CCFF; height: 100px; width: 200px;/*試著把寬刪除了再運行代碼*/ border: 1px solid #66CCCC;float:left; }.box2 {background-color: #33CC99; height:100px; width: 100px;/*試著把寬刪除了再運行代碼*/ border: 1px solid #336666;float:left;}--></style></head><body><div class="box"></div><div class="box2"></div></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
二、下面我要請我的好夥伴clear出場給你們講講它的故事，有請。
大家好，我是clear，能見到如此多人捧場我感到無比的榮幸，雖然在各位網頁設計工作中我的作用常常被忽略，但我也有些作用是沒有人能替代的，下面我將講幾項我實用作用以激發大家對我的興趣：
1．如果你想一段文字資料流兩邊可以出現浮動對像的話，你可以用clear:none，看下面效果，藍色背景段落兩邊的盒子是浮動的哦。
<!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> 如果你想嘗試一下不用表格來排版網頁，而是用CSS來排版你的網頁，也就是常聽的用DIV來編排你的網頁結構，又或者說你想學習網頁標準設計，再或者說你的上司要你改變傳統的表格排版方式，提高企業競爭力，那麼你一定要接觸到的一個知識點就是CSS的盒子模式，這就是DIV排版的核心所在，傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容，改用CSS排版後，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。因為用這種方式排版的網頁代碼簡潔，更新方便，能相容更多的瀏覽器，比如PDA裝置也能正常瀏覽，所以放棄自己之前鐘愛的表格排版也是值得的，更重要的是CSS排版網頁的優勢遠遠不只這些，本人在這裡就不多說，自己可以去尋找相關資訊。理解CSS盒子模型什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。 CSS盒子模式</p><div class="box2"></div><p id="clearF"> 這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。填充只有寬度屬性，可以理解為生活中盒子裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。在現實生活中，假設我們在一個廣場上，把不同大小和顏色的盒子，以一定的間隙和順序擺放好，最後從廣場上空往下看，看到的圖形和結構就類似我們要做的網頁版面設計了，如下圖。</p></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
2．如果你要為一個網頁準備一個頁尾區塊，比如<div id=”footer”></div>，你在設計網頁的時候，你想不管你前邊怎麼浮動排版而又不想這個頁尾跟上去，讓它一直保持在前邊內容後邊，而且還是換行獨立顯示的，那麼給這個頁尾區塊樣式加個clear:both吧。
3．我還可以快速清除網頁中具有浮動屬性的不同對像的浮動，如果有很多的話，我的作用更能發揮出來，當然你也可以一條一條樣式去刪掉浮動的樣式，但我肯定這樣沒有我來的方便，下面效果中，沒有清除浮動前是橫排的，但是清除後變成縱排（舉此例只為說明問題，不管這執行個體實不實用），請自己刪掉我的注釋部分進行前後對比。
<!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>用clear快速清除所有對像浮動</title><style type="text/css"><!--/*body div {clear:both;}*/* {margin:0px; padding:0px;}body {margin:10px;font-size:15px;}.box1 {background-color: #66CCFF;height:30px;width: 100px;border: 1px solid #336666; float:left;}.box2 {background-color: #FF0000;height:30px;width: 100px;border: 1px solid #336666; float:left;}.box3 {background-color: #00FF00;height:30px;width: 100px;border: 1px solid #336666; float:left;}.box4 {background-color: #0000FF;height:30px;width: 100px;border: 1px solid #336666; float:left;}.box5 {background-color: #FF00FF;height:30px;width: 100px;border: 1px solid #336666; float:left;}--></style></head><body><div class="box1">我原來位置是[橫排]的</div><div class="box2">我原來位置是[橫排]的</div><div class="box3">我原來位置是[橫排]的</div><div class="box4">我原來位置是[橫排]的</div><div class="box5">我原來位置是[橫排]的</div><div class="box2">我原來位置是[橫排]的</div><div class="box3">我原來位置是[橫排]的</div><div class="box4">我原來位置是[橫排]的</div><div class="box5">我原來位置是[橫排]的</div></body></html>
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
好了，我的介紹到此完畢，各位還滿意嗎？有什麼不滿意可以提出來哦。你的意見就像一面鏡子，它可以讓我很清楚地發現自己的不足，然後改進它。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
