为什么要清除浮动?
现在我们有一个需求,有一个外层的大盒子,里面有很多的图片,但是图片的个数是动态变化的。我们的盒子需要包裹这些图片,而且盒子大小是随我们图片总共的大小撑起来的。图片假设用很多div包裹起来(称为dv吧),我们肯定要给这个内部的dv设置浮动。那么问题来了,这个时候浮动元素不在占据原本的标准流空间,最外层的div就没有高度了。那么为了让最外层的盒子能够包裹这些浮动元素,我们需要给这个外层div清除浮动的效果。
( HTML)
<div class="box">
<div class="dv">
<img src="img/ph1.png" />
</div>
<div class="dv">
<img src="img/ph2.png" />
</div>
<div class="dv">
<img src="img/ph3.png" />
</div>
<div class="dv">
<img src="img/ph4.png" />
</div>
<div class="dv">
<img src="img/ph5.png" />
</div>
</div>
(CSS)
.box{
margin:auto;
width:1000px;
border:2px solid red;
}
.dv{
width:300px;
height:280px;
float:left;
margin:10px;
}
img{
width:300px;
height:280px;
}
不清除浮动的样子:
我们看到最外层的盒子的边框变成了一条线,没有被子元素撑开。这就是因为子元素和父元素不在一个层面上,父元素就没有子元素来撑开,默认没有高度,所以显示的只有边框。
清除浮动的方法
1.给父元素添加overflow属性
具体在上面的代码中,我们可以给box添加,如下所示:
.box { overflow:hidden; }
这个在实际中很少用,因为overflow有很多作用,加上他其他效果可能就不正确了。
2.在最后一个浮动元素后面加一个空的div
具体如下:
html中ph5图片的div后加上
给他设置一个dv1的类,样式为
.dv1{
clear:both;
}
3.after 伪元素清除浮动
给外层的盒子box加一个after伪元素的样式,具体如下:
.box:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
先将伪元素转化为块级元素,然后将高度设为0,visiblity设为hidden为双重保险,保证伪元素看不见,却能起到清除浮动的作用。
4.双伪元素清除法
还是给最外层的盒子box加下面的样式,具体如下:
.box:after,.box:before{
content:" ";
display:table;
}
.box:after{
clear:both;
}
.box{
*zoom:1;
}
清除浮动后的效果
清除浮动后:
总结:
清除浮动的方法最常用的就是3和4,很多大型的网站上都应用的是这两种。因为不会影响其他的元素,而且较为方便。