clearfix

最初的我可以理解的clear解決方法是

clear:both

后來經(jīng)過多次實踐我終于明白了overflow有著巨大的作用

overflow:hidden or
overflow: auto

overflow一共有三個屬性值：visible, auto，scroll 和hidden。scroll，auto和hidden會把包含的元素變成塊級元素，從而達到清除浮動的效果。（table-cell和table-caption都不是塊級元素）

使用之后，如果給父元素加個border，會發(fā)現(xiàn)子元素也存在這圍墻之中。如果需要撐開父元素的高度，或者要使用一個背景圖，就很需要加上這句話

學習兼容性之后，zoom對IE6、7也必不可少了

zoom: 1

新get的技能，不會吞掉container之間交叉的margin

.container:after { 
    content:""; 
    display:block; 
    clear:both;
 }

一般常用的辦法

.container { 
    overflow: hidden; 
    display: inline-block; /* Necessary to trigger "hasLayout" in IE */ 
    display: block; /* Sets element back to block */
 }

或者

.container { 
    overflow: hidden; /* Clearfix! */ 
    zoom: 1; /* Triggering "hasLayout" in IE */ 
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using               block-level elements. */
}