Come abbiamo detto, gli elementi float vengono traslati dal flusso degli elementi della pagina. Elementi
adiacenti risentono della loro presenza, ma per gli antenati di un elemento float, questo è come se non ci fosse.
I float vanno quindi “contenuti”: questo sarà possibile in due modi. Il primo è attribuire un’altezza al contenitore
dell’elemento float. Se invece non possiamo specificare l’altezza perchè questa è variabile a seconda del contenuto,
dovremo usare un elemento che dà il clear prima di chiudere il contenitore.
Ecco il codice di esempio che abbiamo appena visto con l’aggiunta dell’elemento che dà il clear:
<div style=”border: 1px solid #000″>
<img src=”biglia.jpg” alt=”biglia” style=”float:left;margin: 10px”>
<p>Qui il testo… </p>
<div style=”clear:left”></div>
</div>
Da notare che, anche se non abbiamo necessità di contenere il float, il clear per garantire
robustezza può essere applicato a un elemento successivo a quello reso float. Consideriamo per esempio
un layout a due colonne con navigazione a destra:
<div id=”container”>
<div id=”menu”> qui il menu </div>
<div id=”content”> contenuti principali </div>
<div id=”footer”> qui il footer </div>
</div>
Ecco il CSS minimale:
div#menu{float: right; width: 180px}
div#content{margin-right: 180px}
div#footer{clear: right}
E’ essenziale in questo caso dare il clear al footer per far si che questo non subisca il float del menu nel caso in
cui la colonna di navigazione risulti più lunga di quella dei contenuti.