如何清除浮动：

• 父元素中添加一个属性 overflow:hidden
• 添加额外标签，并在标签中使用clear:both
• 给浮动元素父级设置高度
• 使用伪元素（必须是块级元素上使用）

clearfix:after {
   content: '';
   height: 0;
   display: block;
   clear: both;
   overflow: hidden;
   visibility: hidden;
}
.clearfix {
    zoom: 1;
}

• 使用双伪元素清除浮动

.clearfix:before,.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
     zoom: 1;
}

=> 推荐使用第4种方法使用伪元素，因为第1种方法子元素的内容超出会被隐藏掉，第二种增加许多不必要的标签，第3种只适合那种固定高度的布局，最后一种不够严谨。