Clear di elementi flottanti via CSS (after)

***annuncioVideo***

Uno dei problemi che più assilla chi lavora con i CSS e controllare l’altezza dei Box in float (right o left) o meglio controllare quando il box termina.
Ci sono varie soluzioni a questo problema. Da codice HTML si può semplicemente usare un <br /> con attributo clear:

<br clear("right|left|all|none") />

Oppure qualsiasi elemento HTML con style inline clear:

<hr style="clear:both|right|left|" />

Nel br abbiamo all, mentre nei css abbiamo both. L’attributo dice che ciò che segue deve essere visualmente sotto un elemento float a destra a sinistra o a entrambi.

Un ottimo articolo sull’argomento, per una soluzione CSS, è Cleaner a float container without source markup, che propone:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Che propone l’utilizzo dello pseudo-elemento after.

Io l’ho rivisto anche in questo modo:

.clearfix:after{
content: "<br clear=""all"" />";
font-size: 0px;
display: block;
height: 0;
}

Se trovi questo articolo su un blog diverso da “blog.merlinox.com” si tratta probabilmente di una copia non autorizzata. L’indirizzo originale di questo articolo è: Clear di elementi flottanti via CSS (after) scritto da Merlinox.