Tablet-less

Due proprietà fondamentali per i layout sono float e clear.

La proprietà float

Questa proprietà ha lo scopo di estrarre un elemento dal normale flusso HTML e spostarlo su uno dei lati del suo contenitore, gli altri elementi si posizioneranno sul lato opposto. Ha tre soli valori:

• none – l’elemento mantiene il suo posizionamento naturale;
• left – l’elemento viene spostato a sinistra e gli altri contenuti scorrono a destra;
• right – l’elemento viene spostato a destra e gli altri contenuti scorrono a sinistra;

L’elemento e di tipo block quindi ha delle dimensioni specifiche, se non vengono specificate si adatta alle dimensioni del contenitore.

Il contenitore, per questi elementi, non ne rileva la presenza quindi per evitare problemi bisogna:

• impostare un’altezza esplicita per il contenitore che sia maggiore di quella degli elementi “flottanti” in esso contenuti;
• utilizzare la proprietà clear per interrompere l’affiancamento, il contenitore si adatterà automaticamente all’altezza degli elementi “flottanti” in esso;

La proprietà clear

Attraverso clear si vuole impedire che ad un dato elemento si affianchino elementi “flottanti“. Ha i seguenti valori:

• none – gli elementi con float possono circondare l’elemento sia a destra che a sinistra;
• left – l’elemento non può avere elementi “flottanti“ affiancati a sinistra;
• right – l’elemento non può avere elementi “flottanti“ affiancati a destra;
• both – l’elemento non può avere elementi “flottanti“ affiancati ne a destra e ne a sinistra;