clear和overflow在清除浮动的使用：

1.clear 

首先 清除浮动的原理 ，其实 是元素留出足够多的 垂直外边距 给浮动的元素。

代码如下:
<div >
<div style="float:left"></div>
</div>

这个效果 是 外层div不会包含内层div。因为浮动的元素 脱离了原始文档流。
以上面这个为例：一般而言 ，有三种方式清除浮动。

第一：让外层元素也浮动，例如：

代码如下:
<div style="float:left" >
<div style="float:left"></div>
</div>

然后 再此元素之外 的元素上添加clear：both效果。
第二：给外层div的末尾添加一个元素，并利用此元素清楚浮动。
具体用法：

代码如下:
<div style="clearfix" >
<div style="float:left"></div>
</div>
.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix{display:inline-block}
.clearfix{display:block}

其中后面的两个 是为了兼容其他浏览器设置的。因为：after不是所有浏览器都支持的。
第三：利用 overflow属性

代码如下:
<div style="overflow:hidden" >
<div style="float:left"></div>
</div>

第四：两个相互不包含的元素，清除后面一个元素的浮动。

<div class="box">...</div>
<section class="after-box">...</section>

清除浮动前

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

清除浮动后

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

2.overflow

div标签里面有一张图片，但是比div还要高，这样图片就会把超出的地方浮动到div外面，为了不让图片的超出部分浮动到div外面，使用overflow来清除浮动，原始如下图：

imgout20170216135022

<style type="text/css">
    body{
         margin: 0;padding: 0;
    }
    div{
         border:5px solid red;
    }
    img {
         float: right;
    }
    .clearfix {
         overflow: auto;
         /*zoom: 1;//支持IE6兼容*/
    }
</style>
<div class="clearfix">
不......这个图片比包含它的元素还高， 而且它是浮动的，于是它就溢出到了容器外面！
<img src="http://img.aipaike.com//group1/M00/0C/79/Cvv7ZVdyJneANc73AAO5i6uQbvA283_300x300.jpg">
</div>

正常浮动后如下图：

imgin20170216135022