浮动出现空白的问题

      今天在做一个作品展示网站的时候，出现一个小问题。在使用浮动的时候出现了点小问题，第一行向左浮动正常，第二行就出现问题了，空出了一个位，第二行空出了

 两个位。一开始以为是margin或则padding的问题，但是清除了margin和padding后，问题依然存在。

        

        html代码：

<div class="worksList"> 
      <div class="worksBox">
	      <img src="images/zheye (1).png"/>
		  <div class="showBigBtn">点击查看大图</div>
	  </div>
	  <div class="worksBox">
	      <img src="images/zheye (2).png"/>
		  <div class="showBigBtn">点击查看大图</div>
	  </div>
	  <div class="worksBox">
	      <img src="images/zheye (3).png"/>
		  <div class="showBigBtn">点击查看大图</div>
	  </div>
	   <div class="worksBox">
	      <img src="images/zheye (4).png"/>
		  <div class="showBigBtn">点击查看大图</div>
	  </div>
	  <div class="worksBox">
	      <img src="images/zheye (5).png"/>
		  <div class="showBigBtn">点击查看大图</div>
	  </div>
	  <div class="worksBox">
	      <img src="images/zheye (6).png"/>
		  <div class="showBigBtn">点击查看大图</div>
	  </div>
	  
	  <div class="clear"></div>
   </div>

            css代码： 

.worksList .worksBox
{
	float:left;
	margin-left:80px;
	-webkit-box-shadow: 5px 5px 5px #ccc;
    -moz-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
	width:320px;
	padding:10px;
	background:white;
	text-align:center;
	margin-bottom:20px;
}

     以前经常做这种布局，但是浮动却没有出现这种问题。于是，我翻看以前的代码，终于发现问题了！原因在于：我没有设置固定的高度。于是我设置了固定高度，问题就解决了。