clearfix

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

clear:both

后来经过多次实践我终于明白了overflow有着巨大的作用

overflow:hidden or
overflow: auto

overflow一共有三个属性值：visible, auto，scroll 和hidden。scroll，auto和hidden会把包含的元素变成块级元素，从而达到清除浮动的效果。（table-cell和table-caption都不是块级元素）

使用之后，如果给父元素加个border，会发现子元素也存在这围墙之中。如果需要撑开父元素的高度，或者要使用一个背景图，就很需要加上这句话

学习兼容性之后，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. */
}