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;
}
第四种方法的改良版,虽然简便,但是不严谨。