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:

<div id="contenitore">  
  <div class="floatLeft">Contenuto del blocco</div>  
  <div class="floatLeft">Contenuto del blocco</div>  
    <div class="clearBoth"><!-- --></div>
</div>

Ed ecco come impostare correttamente i CSS:

#contenitore {
	width:700px;
  background:#C30;
}
.floatLeft {
  float:left;
  background:#0C0;
  color:#FFF;
  padding:20px;
  width:50px;
  margin:0 50px 0 0;
}
.clearBoth {
	clear:both;
}

2) Utilizzare la pseudoclasse :after

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

<style type="text/css">
   .clearfix:after { 
   content: "."; 
   display: block; 
   height: 0; 
   clear: both;
   visibility: hidden; 
} 

.clearfix { /* for IE/Mac */
   display: inline-block;
} 
</style><!-- main stylesheet ends, CC with new stylesheet below... --> 
<!--[if IE]> 
<style type="text/css"> 
.clearfix { 
   zoom: 1;     /* triggers hasLayout */ 
   display: block;     /* resets display for IE/Win */
}  /* Only IE can see inside the conditional comment 
and read this CSS rule. Don't ever use a normal HTML 
comment inside the CC or it will close prematurely. */ 
</style>  <![endif]-->

Ecco la pagina di esempio.

3) Utilizzare overflow:hidden

Ecco la soluzione più semplice:

Di seguito il codice css…

div.container { 
   border: 1px solid #000000; 
   overflow: hidden;
   width: 100%;
}
 
div.left {
   width: 45%; 
   float: left; 
}
 
div.right { 
   width: 45%; 
   float: right;
}

…ecco la pagina di esempio.