jQuery: clear delle immagini flottate

Le immagini flottate all'interno dei blocchi di testo possono causare dei problemi al nostro layout se non vengono opportunamente gestite. Il motivo è semplice: se l'immagine è più alta del testo, il floating applicato su quest'ultima influenzerà anche i blocchi successivi. Per questo motivo si rende necessario applicare degli stili di contenimento dei float al genitore dell'immagine, ossia al blocco di testo. Il problema è che non possiamo sapere in anticipo quali blocchi di testo avranno un'immagine flottata e una soluzione manuale è alquanto scomoda. Possiamo pertanto usare jQuery per automatizzare questo processo. Vediamo come.

Partiamo da questa struttura HTML:

<p>
	<img src="float.png" alt="" class="alignleft" />
	Testo...
</p>
<p>Paragrafo dopo il float.</p>

La classe CSS di contenimento dei float è la seguente:

.clear {

    overflow: hidden;
    height: 100%;

}

Possiamo usare jQuery per applicarla al genitore dell'immagine, a prescindere dal tipo di elemento usato:

$(function() {

    $('img.alignleft').parent().addClass('clear');

});

Potete visionare l'esempio finale in questa pagina.