此為未清除浮動源代碼，運行代碼無法查看到父級元素深灰色背景。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background: grey;border: 1px solid gold;"><div style="float: left; background:#cccccc; line-height:100px;">left</div> <div style="float: right; background:#cccccc; line-height:200px;">right</div> </div> </body> </html>
代碼運行結果：
四種清除浮動方法如下：
1、使用空標簽清除浮動。 我用了很久的一種方法，空標簽可以是div標簽，也可以是P標簽。這種方式是在需要清除浮動的父級元素內部的所有浮動元素后添加這樣一個標簽清除浮動，並為其定義CSS代碼：clear:both。此方法的弊端在於增加了無意義的結構元素。
對於使用額外標簽清除浮動（閉合浮動元素），是W3C推薦的做法。至於使用<br />元素還是空<div></div>可以根據自己的喜好來選（當然你也可以使用其它塊級元素）。不過要注意的是，<br />本身是有表現的，它會多出一個換行出來，所以要設定它的heigh為0，以隱藏它的表現。所以大多數情況下使用空<div>比較合適。
代碼如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background: grey;border: 1px solid gold; "> <div style="float: left; background:#cccccc; line-height:100px;">left</div> <div style="float: right; background:#cccccc; line-height:200px;">right</div> <div style="clear:both"></div> </div> </body> </html>
顯示效果：
2、使用overflow屬性。 此方法有效地解決了通過空標簽元素清除浮動而不得不增加無意代碼的弊端。使用該方法是只需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用於兼容IE6，也可以用width:100%。不過使用overflow的時候，可能會對頁面表現帶來影響，而且這種影響是不確定的，你最好是能在多個瀏覽器上測試你的頁面；
代碼如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background: grey;border: 1px solid gold; overflow: hidden; zoom:1;"> <div style="float: left; background:#cccccc; line-height:100px;">left</div> <div style="float: right; background:#cccccc; line-height:200px;">right</div> </div> </body> </html>
3、使用after偽對象清除浮動。 該方法只適用於非IE瀏覽器 。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置height:0，否則該元素會比實際高出若干像素；要注意的是：從content屬性是必須的，但其值可以為空，藍色理想討論該方法的時候content屬性的值設為”.”，但我發現為空亦是可以的
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .text{ background: grey; border: 1px solid gold; } .text:after{ display:block; clear:both;
content:""; visibility:hidden; height:0; } </style> </head> <body> <div class="text"> <div style="float: left; background:#cccccc; line-height:100px;">left</div> <div style="float: right; background:#cccccc; line-height:200px;">right</div> </div> </body> </html>
4、浮動外部元素，float-in-float。這種方法很簡單，就是把“#outer”元素也進行浮動（向左或者向右）。但是這種方法帶來的別外一個問題就是和父級相鄰的下一個元素會受到父級的影響位置會產生變化，所以使用這種方法一定要小心。有選擇把頁面中的所有元素都浮動起來，最后使用一個適當的有意義的元素（比如頁腳）進行清理浮動，這有助於減少不必要的標記，但是過多的浮動會增加布局的難度。（這時候元素不會獨占整行，因為元素也被設置為浮動類型了）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background: grey;border: 1px solid gold; width:500px; float: left;"><!--只有設置了元素的寬度的時候才能顯示效果--> <div style="float: left; background:#cccccc; line-height:100px;">left</div> <div style="float: right; background:#cccccc; line-height:200px;">right</div> </div> </body> </html>