清除浮動一般有兩種思路：
一、利用clear屬性，清除浮動
二、使父容器形成BFC
一、利用clear屬性，清除浮動
clear屬性規定元素的哪一側不允許其之前浮動元素
第二個div添加了clear:both屬性后，其左側的div(第一個div)不再浮動，所以后面的div都換行了。
1、添加空div清理浮動
我們可以利用這點在父容器的最后添加一個空的div，設置屬性clear:left或clear:both，這樣就可以達到撐開父元素的目的了。
2、使用css插入元素
上面的做法瀏覽器兼容性不錯，但是向頁面添加了空的內容來達到改變效果的目的，代碼不簡潔。我們可以利用css的：after偽元素來做此事。
對父容器添加floatfix類后，會為其追加一個不可見的塊元素，然后設置其clear屬性為left或both。對于IE6、7不支持偽元素，可以使借助BFC/hasLayout
二、使父容器形成BFC（Block Format Content）
1、BFC有三個特性：
（1）BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發生垂直 margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋（例如邊框，非空內容，padding等）就會發生margin重疊。
因此要解決margin重疊問題，只要讓它們不在同一個BFC就可以了。
（2）BFC不會重疊浮動元素
（3）BFC可以包含浮動
我們可以利用BFC的第三條特性來“清浮動”，這里其實說清浮動已經不再合適，應該說包含浮動。也就是說只要父容器形成BFC就可以包含浮動，從而被撐開，簡單看看如何形成BFC：
（1）float值不為none，可以是left，right或both
（2）overflow為hidden或auto或scroll
（3）display為inline-block或table-cell或table-caption
（4）position為absolute或fixed
我們可以對父容器添加這些屬性使其變成BFC，從而達到“清浮動”效果
2.1利用float來使父容器形成BFC
我們可以看到父容器高度沒有塌陷，但是長度變短了，因為div應用float后會根據內容來改變長度（absolute，float寬度都會自動收縮）。
2.2使用BFC的其它局限
上面提到使用float形成BFC的時候會使父容器的長度縮短，而且還有個重要的缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦？難道要全部使用float嗎？BFC的幾種方式都有各自的問題，overflow屬性會影響滾動條和絕對定位的元素；position會改變元素的定位方式；display這幾種方式依然沒有解決低版本IE問題。
看起來還是第一種方式比較好，可是低版本IE該怎么辦呢？
2.3hasLayout
我們知道在IE6、7內有個hasLayout的概念，很多bug正是由hasLayout導致的，當元素的hasLayout屬性值為false的時候，元素的尺寸和位置由最近擁有布局的祖先元素控制。當元素的hasLayout屬性值為true的時候會達到和BFC類似的效果，元素負責本身及其子元素的尺寸設置和定位。我們可以利用這點在IE6、7下完成清浮動，先看看怎么使元素hasLayout為true：
（1）position:absolute
（2）float:left或right
（3）display:inline-block
（4）width:除"auto"外的任意值
（5）height:除"auto"外的任意值
（6）zoom:除"normal"外的任意值
（7）writing-mode:tb-rl
在IE7中使用overflow:hidden或scroll或auto也可以使hasLayout為true
三、一個相對靠譜的解決方案
經過上面的比較我們可以得出一個相對靠譜的解決方案
*在IE+、現代瀏覽器上使用偽元素
*在IE6、7使用hasLayout
具體應該使用哪種方式來使元素hasLayout為true呢？相對而言zoom：1比較好因為不會造成其他影響。
四、寫在最后
雖然我們得出了一種瀏覽器兼容的靠譜解決方案，但這并不代表我們一定得用這種方式，很多時候我們的父容器本身需要position：absolute等，形成了BFC的時候我們就可以直接利用這些屬性了，大家要掌握原理，活學活用?？偠灾宄觾煞N方式：
1、利用clear屬性清除浮動
2、是父容器形成BFC
轉載http://www.cnblogs.com/dolphinX/p/3508869.html內容有部分修改
參考http://www.cnblogs.com/dojo-lzz/p/3999013.html
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
