Altezza automatica DIV con elementi flottanti
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
Approfondimenti online
La tecnologia informatica ha fatto passi da gigante. In modo particolare Google, che con il suo analizzatore di testo, è in grado di proporre collegamenti contestuali a quanto hai appena letto. Questi i link pubblicitari proposti da Adsense.
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.