float aufheben

[Sturmverliebt]

Hallo,

hab noch ein weiteres "Problem" um mein "float" aufzuheben nehme ich ein

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

ich kann mir denken, dass dieses bestimmt total überflüssig ist. Wie macht ihr das?

Mein HTML Code

  
 <nav>  
 	<ul>  
    	<li><a href="#">Nav 1</a></li>  
    	<li><a href="#">Nav 2</a></li>  
    	<li><a href="#">Nav 3</a></li>  
    	<li><a href="#">Nav 4</a></li>  
    </ul>  
 </nav>  
  
 <div style="clear:both;"></div>  
  
 <figure>  
     <div>  
     	<img src="team/vorschau/1.jpg" alt="Mitarbeiter 1" />  
     </div>  
     <figcaption>  
        <span>Name der Person</span>  
        <span>Was macht diese Person in der Firma?</span>  
     </figcaption>  
 </figure>  

und mein CSS Code

  
nav ul {  
	font-size:0.89em;  
}  
  
nav ul li {  
	float: left;  
	display: block;  
	margin: 0 10px 0 0;  
}  
  
nav ul li a {  
	padding:5px 7px 3px 7px;  
}  
  
figure:nth-of-type(3n){  
	margin:0 0px 20px 0  
}  
  
figure {  
    position: relative;  
    width: 300px;  
    height: 200px;  
	float:left;  
	margin:0 17px 20px 0  
}  
  
figure>div {  
    transition: all 1s ease;  
    position: relative;  
    height: 150px;  
    overflow: hidden;  
    z-index: 10;  
}  
  
figure>div:hover {  
    height: 320px;  
}  
  
figure>div img {  
    z-index: 10;  
}  
  
figcaption {  
    display: block;  
    position: absolute;  
    width: 400px;  
    bottom: 5px;  
    z-index: 5;  
}  
  
figcaption span {  
    display: block;  
}