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.