css解决top塌陷及清除浮动

margin-top 塌陷
两个盒子嵌套时，内部盒子设置margin-top会追加到外部盒子上，使内部盒子设置失败，解决方法：

1. 外部盒子设置边框
2. 外部盒子设置属性 overflow:hidden
3. 使用伪元素类(推荐)：给父元素添加clearfix类即可。

.clearfix:before{
     content: '';
     display:table;
}

清除浮动
父级盒子不设置高度，子盒子浮动时，撑不开父级盒子，此时父级盒子需要清除浮动。清除方法：

1. 父级上增加属性overflow：hidden

2. 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both
   <div style="clear: both;"></div>

3. 使用伪元素类(推荐)：

.clearfix:after{
      content: "";
      display: table;
      clear: both;
}

伪元素类解决margin-top塌陷及清除浮动整合：

.clearfix:before,.clearfix:after{
      content: "";
      display: table;
}
.clearfix:after{
      clear: both;
}
/*兼容IE非标准浏览器*/
.clearfix{
      zoom: 1;
}