清除浮动

因为文档流中父元素的高度由子元素撑开提供的，当子元素浮动时，父元素的内部高度就会为0，所以要清除浮动。

 

方法1：新添加一个标签，并给其设置clear：both；缺点是添加额外标签，语义化比较差。

 

方法2：父级元素添加overflow属性，overflow：hidden；原理是通过触发BFC，形成独立的容器。缺点是内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

 

方法3：使用before和after双伪元素清除浮动。

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