閉合浮動

方法一：

.clearfix:after {content:"."; display:block; height:0; clear:both; } 
.clearfix { *zoom:1; }

1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間; 
2) height:0 避免生成內容破壞原有佈局的高度。 
3) visibility:hidden 使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互; 
4）經過 content:"."生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的，例如oocss裏面就有經典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣作的,firefox直到7.0 content:」" 仍然會產生額外的空隙； 
5）zoom：1 觸發IE hasLayout。 
經過分析發現，除了clear：both用來清除浮動的，其餘代碼無非都是爲了隱藏掉content生成的內容，這也就是其餘版本的閉合浮動爲何會有font-size：0，line-height：0。 

方法二:

.clearfix:before,.clearfix:after { 
    content:""; 
    display:table; 
} 
.clearfix:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */ 
.clearfix { zoom:1; } 

 

Block formatting contexts （塊級格式化上下文），如下簡稱 BFC。 

那麼如何觸發BFC呢？ 
float 除了none之外的值 
overflow 除了visible 之外的值（hidden，auto，scroll ） 
display (table-cell，table-caption，inline-block) 
position（absolute，fixed）

 

觸發hasLayout的條件： 
position: absolute 
float: left|right 
display: inline-block 
width: 除 「auto」 外的任意值 
height: 除 「auto」 外的任意值 （例如不少人清除浮動會用到 height: 1% ） 
zoom: 除 「normal」 外的任意值

 

在支持BFC的瀏覽器（IE8+，firefox，chrome，safari）經過建立新的BFC閉合浮動； 
在不支持 BFC的瀏覽器 （IE6-7），經過觸發 hasLayout 閉合浮動。 

網址：http://www.jb51.net/css/67471.html