清除浮动、div随子元素高度增加而改变

因为高度塌陷所以需要清除浮动：元素脱离了文档流

满足下列条件之一就可触发BFC

　　【1】根元素，即HTML元素 
　　【2】float的值不为none 
　　【3】overflow的值不为visible 
　　【4】display的值为inline-block、table-cell、table-caption 
　　【5】position的值为absolute或fixed

/*解决：清除浮动*/
/*父级加:*/
1、给父级直接加高度(拓展性不好，不确定父级高度的时候不能使用)
2、overflow:hidden;

3、.clearfloat:after{
    content:"";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
} 
//简单的
.clearfloat:after {
    content: '';
    display: block;
    clear: both;
}
.clearfloat{zoom:1} /*针对IE8以下做的兼容*/

/*更好的一种:清除浮动、防止浏览器顶部的空白奔溃*/
/*创建一个匿名的表格单元*/
.clearfloat:after,
.clearfloat:before{
	content:"";
	display:table;
} 
.clearfloat:after{
	clear:both;
}