Gestire gli elementi flottanti con clear:left

float

Esistono diversi modi per gestire il float nel layout di una pagina web, abbiamo visto nell’articolo precedente come sia possibile gestire gli elementi flottanti con la proprietà overflow , questo metodo implica però una certa attenzione verso i browser meno recenti come Internet explorer 6 e precedenti e il conseguente uso di hacks css.

Potrebbe quindi non essere possibile adottare questa soluzione nel nostro layout, è dunque consigliabile considerare un’alternativa più tradizionale per la gestione degli elementi flottanti che implica l’utilizzo della proprietà clear.

La problematica principale del float è la gestione dell’elemento contenitore, essendo questo posto nel normale flusso della pagina non può “sentire” gli elementi contenuti che vengono portati fuori dal flusso grazie alla proprietà float.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esempio float</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="contenitore">
<div id="contenuto">
Lorem ipsum[...]
</div>
<div id="colonna">
Lorem ipsum[...]
</div>
</div>
</body>
</html>

Nonostante al div contenitore sia settato un colore di fondo #ebebeb questo non appare nella pagina per le ragioni sopra citate e per il fatto di non avere un’altezza settata.

VEDI ESEMPIO

La soluzione a questo problema consiste nel portare l’elemento contenitore fuori dal flusso senza alterare l’intero layout , per fare questo possiamo definire la proprietà float per il div contenitore.

#contenitore{
margin:0px auto;
padding:0px;
text-align:left;
background-color:#ebebeb;
width:600px;
float:left;
}

Questo permette di far funzionare correttamente l’elemento genitore dei div flottanti ma implica l’alterazione del flusso nel layout, nel nostro caso il div contenitore flotta a sinistra perdendo l’allineamento centrato.

VEDI ESEMPIO

Queste problematiche si accentuano nel caso di un layout completo in cui sono presenti altri elementi. Per risolvere, occorre pensare ad un modo per gestire il flusso nella pagina affinchè il layout possa mantenere le impostazioni desiderate. Non potendo centrare un div flottante nella pagina inseriremo un nuovo elemento genitore (un div con id wrap) che manterrà il layout centrato, mentre al suo interno manterremo la struttura attuale.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Esempio float</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrap">
<div id="contenitore">
<div id="contenuto">
Lorem ipsum[...]
</div>
<div id="colonna">
Lorem ipsum[...]
</div>
</div>
</div>
</body>
</html>

VEDI ESEMPIO

Grazie a queste modifiche il layout torna ad essere centrato, il div con id wrap risiede nel flusso normale e centra il contenuto flottante. Nonostante l’apparente correttezza del layout esiste ancora un problema di gestione del flusso nella pagina, è possibile notare questo problema togliendo il colore di background al div contenitore e impostando un colore di fondo al div con id wrap.

#wrap{
margin:0px auto;
padding:0px;
width:600px;
background-color:#cc0000;
}

#contenitore{
margin:0px;
padding:0px;
text-align:left;
float:left;
width:600px;
}

VEDI ESEMPIO

Come in precedenza il div wrap non mostra il colore di fondo in quanto non “sente” il div contenitore e gli elementi flottanti al suo interno, questa problematica causerebbe un errato posizionamento dei div successivi a #contenitore è quindi indispensabile risolverlo per gestire il nostro layout per fare ciò è sufficiente inserire un ultimo elemento sottostante ai div flottanti a cui imposteremo la proprietà clear:left.

Questo ci permette di terminare il float degli elementi prima della chiusura del div #wrap ripristinando correttamente il flusso e mostrando il colore di fondo del div genitore non flottante.

VEDI ESEMPIO COMPLETO

Sebbene questa soluzione sia meno elegante dell’utilizzo di overflow:hidden; rimane una valida alternativa, l’utilizzo di un elemento in più in una pagina html può essere giustificato dal footer che dovrebbe essere comunque presente come ultimo elemento mentre il div wrap può tornare utile per impostare ulteriori immagini di background in supporto alla grafica o per tenere insieme ulteriori parti quali un header o un menu.

Nella caso di un layout completo le cose posso diventare anche molto complicate, gli elementi flottanti potrebbero non essere solamente div e il numero di elementi rende spesso complessa la gestione del flusso nella pagina, diviene quindi utile comprendere a fondo non solo il funzionamento della proprietà float ma soprattutto come gli elementi interagiscano tra loro nell diverse casistiche.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Tutorial e contrassegnata con , . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>