为什么要清除浮动？

1、影响其他元素定位
父盒子高度为0，子盒子全部浮动、定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。

2.背景图片或颜色不能正常显示
由于浮动产生，如果对父级设置了CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

3、外边距内边距设置影响
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

清除浮动方法总结：

1、对父级元素设置高度
对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置（高度设置为：内容高度+padding+border）。

2、clear:both清除浮动
我们在父级“</div>”结束前加div引入“class=”clear””样式,这样就可以清除浮动了。

//html部分
<div class="divfloat"> 
  <div class="divfloat-left">left（向左浮动）</div> 
  <div class="divfloat-right">right(向右浮动）</div> 
  <div class="clear"></div> 
</div> 
//css部分
.divfloat {
  width:400px;
  border:1px solid #F00;
  background:#FF0;
} 
.divfloat-left,.divfloat-right {
  width:180px;
  height:100px; 
  border:1px solid #00F;background:#FFF;
} 
.divfloat-left {
  float:left;
} 
.divfloat-right {
  float:right;
} 
.clear {
  clear:both;
} 

3、overflow:hidden清除浮动
对父级CSS选择器加overflow:hidden样式，可以清除使用的float产生浮动。【BFC有三大特性:(1)BFC会阻止垂直外边距（margin-top、margin-bottom）折叠.(2)BFC不会重叠浮动元素.(3)BFC可以包含浮动.我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适了，应该说用BFC来包含浮动。（还想深入了解BFC的可以参看“https://www.w3.org/TR/CSS21/v…”的详细描述）】

//html部分
<div class="divfloat"> 
  <div class="divfloat-left">left（向左浮动）</div> 
  <div class="divfloat-right">right(向右浮动）</div> 
  <div class="clear"></div> 
</div> 
//css部分
.divfloat {
  width:400px;
  border:1px solid #F00;
  background:#FF0;
  overflow:hidden;
} 
.divfloat-left,.divfloat-right {
  width:180px;
  height:100px;
  border:1px solid #00F;
  background:#FFF;
} 
.divfloat-left {
  float:left;
} 
.divfloat-right { 
  float:right;
} 

4、单伪元素//双伪元素清除浮动
单伪元素清除浮动原理： 通过:after 伪类在浮动块后面加上一个 display:none 的不可见块状内容来，并给它设置 clear:both 来清理浮动。

.clearfix:after {
  content:" ";  /*必须为空*/
  visibility:hidden;
  display:block;
  height:0
  font-size:0;
  clear:both;
}

.clearfix {
  zoom:1;        /*兼容IE浏览器*/  
}

双伪元素清除浮动原理：通过:after 伪类在浮动块后面加上一个 display:table 的不可见块状内容来，并给它设置 clear:both 来清理浮动。（注意：这里隐藏这个空白使用的是 display: table，而不是设置 visibility:hidden;height:0;font-size:0;与单伪元素清除浮动有所区别）

.cearfix:before, .cearfix:after {
   content:" ";    /*必须为空*/
   display:table;
}
.cearfix:after {
  clear:both;
}
.cearfix {
  zoom:1;     /*兼容IE浏览器*/
}

总结：

第一种方法：简单，容易掌握，但只适合高度固定的布局，不推荐使用可以了解。
第二种方法：简单，浏览器支持好，但如果页面浮动布局多，就要增加很多空div，让人感觉很麻烦，不推荐使用，可以了解。
第三种方法：代码少，浏览器支持，不能和position配合使用，因为超出的尺寸的会被隐藏，只推荐没有使用position的布局使用。
第四种方法：浏览器支持好,建议使用。