此為未清除浮動源**，執行**無法檢視到父級元素深灰色背景。
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推薦的做法。至於使用
元素還是空
可以根據自己的喜好來選（當然你也可以使用其它塊級元素）。不過要注意的是，
本身是有表現的，它會多出乙個換行出來，所以要設定它的heigh為0，以隱藏它的表現。所以大多數情況下使用空比較合適。
**如下：
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 html3、使用after偽物件清除浮動。 該方法只適用於非ie瀏覽器 。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽物件中設定height:0，否則該元素會比實際高出若干畫素；要注意的是：從content屬性是必須的，但其值可以為空，藍色理想討論該方法的時候content屬性的值設為」.」，但我發現為空亦是可以的>
<
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
>
doctype html4、浮動外部元素，float-in-float。這種方法很簡單，就是把「#outer」元素也進行浮動（向左或者向右）。但是這種方法帶來的別外乙個問題就是和父級相鄰的下乙個元素會受到父級的影響位置會產生變化，所以使用這種方法一定要小心。有選擇把頁面中的所有元素都浮動起來，最後使用乙個適當的有意義的元素（比如頁尾）進行清理浮動，這有助於減少不必要的標記，但是過多的浮動會增加布局的難度。（這時候元素不會獨佔整行，因為元素也被設定為浮動型別了）>
<
html
>
<
head
lang
="en"
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
>
.text
.text:after
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
>
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
>
清除浮動的幾種方法
1.浮動元素下加空div 為了統一樣式，我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動，可以不用對父級設定高度 也無需技術父級高...
清除浮動的幾種方法
當元素浮動時，他將不再處於普通文件流中，相當於浮在文件之上，不佔據空間，但是會縮短行寬，產生文字環繞的效果。浮動帶來的影響 1，父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流，不佔位，而後面的元素未脫離文件流導致後面的元...
清除浮動的幾種方法
style float left 為了解決container容器高度塌陷問題，我們必須清除浮動 第一種方法 在container元素後加上乙個空的div標籤，然後給設定乙個clear both的樣式 第二種方法 給container容器新增 overflow auto hidden樣式 第三張方法 ...