paitadesignblog

HTML, CSS e tutto il resto

CSS e float: blocchi flottanti e altezza del contenitore. Le soluzioni

In questo articolo precedente, che riguardava i modi per ottimizzare il nostro CSS per rendere uniforme la visualizzazione del nostro sito su tutti i maggiori browser, abbiamo affrontato il bug di IE6 che riguarda l’altezza di un blocco contenente dei blocchi flottanti. Dato che questo comportamento errato del browser è uno dei primi problemi a cui un webdesigner deve fare fronte, e spesso risulta incomprensibile, facciamo il punto della situazione e vediamo tutte le soluzioni possibili.

Ma prima, partiamo dal problema.

Blocchi flottanti e altezza del contenitore: perchè ti comporti così?

Dobbiamo realizzare un layout che preveda una impaginazione a due colonne e un footer: assegnamo ai nostri blocchi la proprietà float: left, definiamo una larghezza per entrambi in modo tale che non superi la larghezza del blocco contenitore, inseriamo il footer, cui assegnamo la proprietà clear: both e se abbiamo fatto tutto senza errori dovremmo ottenere cioò che ci aspettiamo, cioè che l’altezza del contenitore si adatta a quella dei blocchi flottanti, e invece in tutti i browser (tranne che in IE6, che apparentemente, si comporta correttamente) l’altezza del contenitore non varia, in quanto i blocchi flottanti sono a tutti gli effetti sottratti dal flusso della pagina.
Questo comportamento, che potrebbe sembrare assurdo, ha in realtà una spiegazione: esso è necessario per gestire, per esempio, l’altezza di paragrafi contenenti immagini flottanti. Se l’altezza del paragrafo fosse determinata dall’altezza dell’immagine flottante, il testo del successivo paragrafo non potrebbe salire e disporsi attorno all’immagine stessa. Non è ancora chiaro? Ecco una pagina di esempio con il comportamento corretto e quello errato.

Ecco di seguito i fix per fare in modo che tutti i browser abbiano un comportamento uniforme:

1) Inserire un elemento vuoto con "clear: both"

Questa tecnica ristabilisce il normale flusso della pagina inserendo dopo gli elementi flottanti un elemento vuoto con proprietà clear: both. Il punto debole di questa tecnica è l’inserimento in pagina di un elemento con valore semantico pari a zero. Ecco un esempio:

Ed ecco come impostare correttamente i CSS:

2) Utilizzare la pseudoclasse :after

Utiliziamo la pseudoclasse :after per aggiungere un "punto invisibile" al termine del contenitore:

Ecco la pagina di esempio.

3) Utilizzare overflow:hidden

Ecco la soluzione più semplice:

Di seguito il codice css…

…ecco la pagina di esempio.