清除浮动及清除浮动的方法

为什么要清除浮动？

现在我们有一个需求，有一个外层的大盒子，里面有很多的图片，但是图片的个数是动态变化的。我们的盒子需要包裹这些图片，而且盒子大小是随我们图片总共的大小撑起来的。图片假设用很多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，很多大型的网站上都应用的是这两种。因为不会影响其他的元素，而且较为方便。