方案1
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
方案2
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
分隔符分隔符分隔符分隔符分隔符分隔符分隔符分隔符分隔符分隔符分隔符分隔符分隔符分隔符
都向左浮動,父元素高度為0
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
如果我們想讓父元素在視覺上包圍浮動元素可以像下面這樣處理,在最后添加一個空div，對它清理。缺點是增加了一個無意義的標簽
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
<!-- 無意義標簽 -->
<div style="clear:both;"></div>
</div>
BFC清理浮動
BFC的全稱是 Block Format Content
BFC 特性
BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊。
因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊
BFC不會重疊浮動元素
BFC可以包含浮動
我們可以利用BFC的第三條特性來“清浮動”，這里其實說清浮動已經(jīng)不再合適，應該說包含浮動。也就是說只要父容器形成BFC就可以，簡單看看如何形成BFC。
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed
局限性
使用BFC使用float的時候會使父容器長度縮短，而且還有個重要缺陷——父容器float解決了其塌陷問題，那么父容器的父容器怎么辦？overflow屬性會影響滾動條和絕對定位的元素；position會改變元素的定位方式，這是我們不希望的，display這幾種方式依然沒有解決低版本IE問題。。。
hasLayout
IE6、7內(nèi)有個hasLayout的概念，當元素的hasLayout屬性值為true的時候會達到和BFC類似的效果，元素負責本身及其子元素的尺寸設(shè)置和定位。 下面使元素hasLayout為true
position: absolute
float: left|right
display: inline-block
width: 除 “auto” 外的任意值
height: 除 “auto” 外的任意值
zoom: 除 “normal” 外的任意值
writing-mode: tb-rl
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true
兩種方案
雖然我們得出了一種瀏覽器兼容的靠譜解決方案，但這并不代表我們一定得用這種方式，很多時候我們的父容器本身需要position：absolute等形成了BFC的時候我們可以直接利用這些屬性了，大家要掌握原理，活學活用?？偠灾謇砀觾煞N方式
