子元素浮动导致父元素脱离文档流

子元素用了浮动（float：left），父元素会脱离文档流。
解决方案：父元素清除浮动。

给父容器增加属性：

1.display:table
2.overflow:任何一个值都可以，目的是为了让父元素紧邻子元素，消除浮动带来的影响。
负面影响：可能会出现滚动条，不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或overflow:hidden
3.加上clearfix class，父元素引用该类即可:

.clearfix:after{
   content:".";/*加一段内容*/
   display:block;/*让生成的元素以块级元素显示，占满剩余空间*/
   height:0;/*避免生成的内容破坏原有布局高度*/
   clear:both;/*清除浮动*/
   visibility:hidden;/*让生成的内容不可见*/
  }
 .clearfix{zoom:1;/*为IE6，7的兼容性设置*/}

除了clear:both;是为了清除浮动以外，其他的属性就是为了隐藏这个元素.
改进：

.clearfix:after，.clearfix:before{
   content:".";/*加一段内容*/
   display:table;/*创建匿名的表格单元，触发bfc*/
}
.clearfix:after{
  clear:both;/*清除浮动*/
}

给父元素的最后一个子元素加上div标签，并且写上：

lastChild{
    clear:both
}

参考：
after和before的概念
清除浮动