Inserendo elementi flottanti (float:left, float:right) all’interno di un DIV abbiamo la necessità di indicare al browser quando chiudere il DIV, soprattutto per quanto riguarda FIREFOX.
Spesso tendiamo a usare
<br clear="left|right|all">
oppure tramite CSS con lo style
clear:left|right|both
Possiamo però, specie se lo utilizziamo su un layout che deve diventare template questo codice CSS
#work{
/* il DIV con elementi flottanti al suo interno */
}
#work:after{
content: ".";
display: block;
height: 0;
clear: left;
visibility: hidden;
}
Lo pseudo elemento after consente di scrivere o assegnare stili dopo l’elemento sui cui è dichiarato.
Provare per credere 
Thanks to positionseverything.net
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 è: Altezza automatica DIV con elementi flottanti scritto da Merlinox.
Interessante, ma credo poco pratico, almeno per la "chiusura" di un div… perchè personalmente, trovo più utile avere un’unica classe che mi faccia questo tipo di operazione invece di averne 1 per ogni elemento flottante.
Cosa vuol dire un’unica classe che faccia questo tipo di operazione? Lo fai solo sul contenitore superiore "#work" indipendentemente da quello che hai dentro.
Nel senso che se tu hai "n" classi dovrai avere anche "n" classi:after
se invece ne crei una apposina avrai solo "n" classi più una apposita per il floating.
Si esatto eaco, intendevo questo.
Ok ok inteso così concordo.
Il fine era solo quello di comunicare l’after.
Ottima idea comunque quella di usare una classe per l’after.