前言
浮動會導致父元素塌陷（子元素脫離標準流，父元素無法被子元素撐開），清除浮動是一個很常見的問題，這裏暫列一下個人認爲最優的方法~
實現
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
}
.parent{
background-color:yellow;
margin: 0 auto;
width:500px;
}
.left{
background-color:blue;
width:100px;
height:200px;
float:left;
}
.right{
background-color:red;
height:200px;
width:100px;
float:right;
}
.clearFloat:after{/*清除浮動*/
display:block;
clear:both;
content:"\200B";
height:0;
}
.clearFloat{
zoom:1;
}
</style>
</head>
<body>
<div class="parent clearFloat">
<div class="left">
左邊
</div>
<div class="right">
右邊
</div>
</div>
</body>
<html>
效果如下：
和諧不和諧？像不像家長牽着倆寶寶幸福的在一起~
然而！清除浮動的關鍵在於我定義的那個clearFloat樣式，我們把parent的clearFloat樣式去掉後，就會出現父元素塌陷的情況，如圖：
看見沒，兩個寶寶的家長消失了o(╥﹏╥)o！！
我們趕緊來單獨看看clearFloat這個樣式：
.clearFloat:after{/*清除浮動*/
display:block;
clear:both;
content:"\200B";
height:0;
}
.clearFloat{
zoom:1;
}
after是僞元素，相當於是在parent div的後面追加了一個div，這個div用於清除浮動（也就是負責讓父元素檢測到子元素的高度）；
1）display:block 讓生成的元素佔滿剩餘空間（after默認僞元素是inline的）
2）clear:both 清除浮動
3）content:"\200B" 這是Unicode字符裏的一個零寬度空格，本身不可見~
4）height：0 避免生成的內容破壞原有佈局的高度！
5）zoom:1 兼容IE6,7滴
個人心得
清除浮動的方法很多，各有利弊，個人認爲這是最通用而且兼容性好的一個方法，就記下來實現了一下；說實話剛看到這個解決方案，是較其他方案來說最難理解原理，或者代碼最多的一種（你可以想想，有的方法給parent一個height，或者parent裏面加空div帶個clear就完事了~），但也是最優的！定義了這樣一個類，需要清除浮動的地方給他加上就行，是不是很通用~！當然，筆者經驗有限，大家要是有更好的方法歡迎跟我討論分享下~