CSS清除浮动的几种方式

1.为父元素添加overflow：hidden

<div style="overflow:hidden">
      <img src="images/search.jpg"/>
       <img src="images/tel.jpg"/>
      <img src="images/weixin.png"/>
      <img src="images/nav_left.jpg"/>

</div>

img{
     width:50px;
     border:1px solid #8e8e8e;
     float:left;

}

这种方法是先找到浮动元素的父元素，再在父元素中添加属性overflow:hidden,清除找到的父元素中的子元素浮动对页面的影响。一般不使用这种方式，因为overflow:hidden属性的特点是，离开了这个属性的区域会被隐藏，就是超出的部分会被隐藏。

2.浮动父元素

<div style="float:left">
     <img src="images/search.jpg"/>
     <img src="images/tel.jpg"/>
     <img src="images/weixin.png"/>
     <img src="images/nav_left.jpg"/>

</div>

img{
     width:50px;
     border:1px solid #8e8e8e;
     float:left;

}

这种方式也不推荐，了解即可。

3.使用clear:both清除浮动，在所有浮动元素下方添加一个该属性，可以消除float的破坏性，但会增加不必要的标签。

<div>
     <img src="images/search.jpg"/>
     <img src="images/tel.jpg"/>
     <img src="images/weixin.png"/>

     <img src="images/nav_left.jpg"/>

       <div style="clear:both;"></div>

</div>

img{
     width:50px;
     border:1px solid #8e8e8e;
     float:left;

}

这种方法也不是很常用，但需要理解。

4.使用伪元素清除浮动（推荐）

<div class="clearfix">
     <img src="images/search.jpg"/>
     <img src="images/tel.jpg"/>
     <img src="images/weixin.png"/>
     <img src="images/nav_left.jpg"/>
</div>

.clearfix:after{
     content:'';
     display:block;
     clear:both;
}
.clearfix{//兼容低版本IE
zoom:1;

}

这种方法是推荐使用的，bootsrtap也在使用，应该掌握，不然太low了，他的原理就是通过伪元素选择器，在div后面添加了一个clear:both的属性，跟第三种方法是一样的道理。

5.使用双伪元素清除浮动

.clearfix:after,.clearfix:before{
content:'';
display:block;
clear:both;
}
.clearfix{//兼容低版本IE
zoom:1;

}

第四种方法的改良版，虽然简便，但是不严谨。