Clear dei float con display:table
Giovedì 11 Giugno 2009 - 10:41
di Gabriele Romanato
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!
Commenti
1
Funziona anche su IE6?
2
IE6, 7 e anche la versione 8 in retrocompatibilità non supportano display:table
Anche se questi browser eseguono già (erroneamente) il clearing degli elementi in float, non è detto che lo facciano sempre in modo corretto (a volte il padding bottom del contenitore è bloccato), quindi è necessario prestare attenzione all’uso di questa sola istruzione.
# - postato da Fabrizio Calderan - 11 Giugno 2009 - 12:39
3
Personalmente da tempo ho switchato alla soluzione overflow:hidden, credo che al momento sia la migliore e di piu’ facile utilizzo…
# - postato da Andrea - 11 Giugno 2009 - 12:55
4
@Fabrizio
Per distanziare il contenitore dei float si può usare una dichiarazione di padding sull’elemento che segue. Il comportamento dei browser resterà tale fino a quando non verrà cambiato l’algoritmo indicato nelle specifiche per il calcolo dell’altezza automatica di tabella. Perchè “erroneamente”? una tabella non si comporta come un elemento di blocco perchè i suoi algoritmi sono completamente diversi. In altre parole, NON è un elemento di blocco. Il collassamento dello spazio verticale si applica infatti solo agli elementi di blocco che hanno un comportamento di blocco (vedi Table Layout nel codice sorgente di Firefox). ciao ^.^# - postato da Gabriele Romanato - 11 Giugno 2009 - 12:55
5
Il metodo più semplice per contenere i float è l’utilizzo di overflow:auto (o overflow:hidden) nell’elemento contenitore.
Funziona perfettamente anche con ie6.
# - postato da Dedo - 11 Giugno 2009 - 14:18
6
Anch’io adotto e consiglio la soluzione tramite overflow, che oltretutto evita l’inserimento di elementi spesso inutili.
# - postato da gianluca - 11 Giugno 2009 - 14:31
7
@Gabriele:
per come sono organizzate certe pagine, può capitare di non poter assegnare un padding all’elemento seguente (a volte può essere l’ultimo elemento della pagina e non puoi modificare nè lo stile inline, né assegnare un padding-bottom al body di tutte le pagine). Dipende da cosa puoi modificare in produzione.L’”erroneamente” invece era riferito al fatto che IE “esegua già” un clearing di suo, e non al display: table.
@Dedo: anche la soluzione con height: auto (o width:100%) e overflow: hidden non funziona sempre e oltretutto non permette di disegnare agevolmente layout appena un po’ più complessi che prevedano ad esempio elementi annidati in position relative (o absolute) che sormontino ed escano dal contenitore. Quindi anche questa soluzione va valutata con attenzione.
# - postato da Fabrizio Calderan - 11 Giugno 2009 - 15:13
8
Io di solito utilizzo easyClearing
# - postato da Riccardo De Contardi - 11 Giugno 2009 - 16:54
9
[…] Clear dei float con display:table | Edit – Il blog di HTML.it […]
# - postato da links for 2009-06-11 - magnum blog - 12 Giugno 2009 - 01:06
10
Ma usare il posizionamento no? :)
# - postato da Marcello - 12 Giugno 2009 - 09:14
11
> Ma usare il posizionamento no? :)
Dipende? ;-)
# - postato da Gianluca - 12 Giugno 2009 - 11:12
12
Grazie a tutti quelli che hanno scritto di utilizzare overflow: hidden;. Mi è servito proprio oggi.
13
Personalmente alla fine non ho capito cosa conviene fare… :)
io al momento uso ancora (vecchia maniera) il clear:both, ma non ottengo il risultato di “parificare” diverse colonne alla stessa altezza automaticamente.
Perciò in questo ultimo caso utilizzo ancora (non mi picchiate) le table…. fortunatamente solo in piccole porzioni# - postato da simplemal - 22 Giugno 2009 - 12:55
14
suggerimenti o approfondimenti consigliati?
grazie# - postato da simplemal - 22 Giugno 2009 - 13:03