Spesso vi sarà capitato di dover mettere un div contenitore attorno a immagini o box con proprietà float:left.
In questi casi gli oggetti contenuti escono dal contenitore e quest’ultimo “perde” la sua consistenza e, di conseguenza, la sua altezza.

Il problema che si riscontra è visible usando un codice di esempio come questo:

HTML

</pre>
<div id="container">
Div contenitore con oggetti interni in float:left

 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" />
 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" />
 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" />
 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" /></div>
<pre>

CSS

#container {
    width: 450px;
    margin: 20px auto;
    border: 2px solid #cccccc;
    padding: 10px;
}

#container img {
    width:150px;
    height:150px;
    float:left;
}

Anteprima: http://jsfiddle.net/davide_ravasi/LUhWL/1/

Per risolvere questo fastidioso problema abbiamo a disposizione due soluzioni:

SOLUZIONE 1

Aggiungere prima della chiusura del div contenitore un div vuoto con stile clear:both;

Tale soluzione è stata per molto tempo quella più utilizzata, anche se in effetti risulta poco elegante e, soprattutto, sporca il codice con un div praticamente inutilizzato.

HTML

</pre>
<div id="container">
Div contenitore con oggetti interni in float:left

 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" />
 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" />
 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" />
 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" />
<div style="clear: both;"></div>
</div>
<pre>

Anteprima: http://jsfiddle.net/davide_ravasi/LUhWL/2/

SOLUZIONE 2

Esiste una migliore soluzione che permette di non “sporcare” il nostro codice html e di poter avere una classe css sempre a disposizione ogni volta che il problema si ripresenta.
Per questo basta creare una classe nominata per convenzione ‘clearfix’ che aggiunta al div contenitore permette di ottenere lo stesso risultato.

CSS

.clearfix:after {
    display: block;
    clear: both;
    content: "";
}

HTML

</pre>
<div class="clearfix" id="container">
Div contenitore con oggetti interni in float:left

 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" />
 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" />
 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" />
 <img alt="" src="http://blog.spoongraphics.co.uk/wp-content/uploads/2009/furry-monster/monster.jpg" /></div>
<pre>

Anteprima: http://jsfiddle.net/davide_ravasi/LUhWL/3/

Ora non vi resta che aggiungere la classe nel vostro foglio di stile e utilizzarla quando più lo riterrete utile:.
Buon divertimento!