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. */
}
