Clear dei float con display:table

Una delle tecniche più usate per il clear dei float è il cosiddetto Easy Clearing che fa uso del contenuto generato applicato ad una classe clearfix. Facendo dei test per il W3C, mi sono accorto che tutti i browser più recenti contengono automaticamente i float se il loro contenitore ha la dichiarazione display: table. Quindi possiamo scrivere:

.clearfix {
  display: table;
}

Il tutto funziona perché una tabella si espanderà  sempre in altezza per ospitare il suo contenuto. Questa tecnica è supportata anche da IE8. In Safari e Chrome, se il contenitore dei float viene seguito da un altro box con larghezza dichiarata, anche quest'ultimo avrà  bisogno della dichiarazione display:table perché questi browser calcolano una larghezza automatica di tabella in modo diverso. Alla prossima!