float

Arrivato a questo punto, ti assicuro, hai già visto un buon 80% delle caratteristiche dei CSS e delle maggiori proprietà utilizzabili. Starai sicuramente iniziando già a scrivere codice (vero?). Dopo aver preso un po’ di pratica con la sintassi, molto probabilmente sarai incappato nel tuo primo problema: poniamo il caso tu abbia una parte di contenuto, sulla sinistra, e una barra laterale, sulla destra. Come affiancarli?

La risposta purtroppo non è per nulla banale. Iniziamo con ordine però: molto probabilmente ti ritroverai con dell’HTML simile a questo (te lo semplifico per ragioni di praticità):

Visto attraverso le “lenti” dell’HTML, <aside> è conseguente a <section> e, inoltre, entrambi sono degli elementi di tipo block, per cui occupano il 100% dello spazio in larghezza. Come fare per affiancarli?
Per risolvere questo problema ti viene in aiuto la proprietà float, che permette di far scorrere gli elementi sul fianco, invece che uno sotto l’altro. Tuttavia, non sono degli elementi inline, in quanto puoi attribuire valori di larghezza e altezza a piacimento.

I valori che puoi dare a float sono:

• left; l’elemento successivo si affianca a sinistra;

• right; l’elemento successivo si affianca a destra;

• none; l’elemento successivo non si affianca.

Per cui, nell’esempio di prima, se scrivi:

otterai che i due contenitori si affiancano… Con un piccolo problema: il contenitore padre #content ha perso la sua altezza, ossia, non è più alto quanto è il suo contenuto. Questa è una cosa del tutto normale, in quanto applicando un float vai ad alterare la normale esecuzione e renderizzazione degli elementi, che normalmente sono uno consecutivo all’altro. In questo modo è come se andassi ad aggiungere un livello soprastante al tuo sito.
Come risolverla, allora, questa probelmatica? Ci sono molte vie, te le elenco qui di sotto (alcune di queste le vedremo in modo approfondito da qui in avanti):

• aggiungere un elemento successivo a quelli float con la proprietà clear;

• utilizzare :after con proprietà clear sul contenitore degli elementi float;

• impostare overflow:auto; sul contenitore degli elementi float;

• assegnare al contenitore degli elementi float un’altezza definita.

Immagino che tu non sia ancora pienamente soddisfatto della mia spiegazione. È una cosa normale: capire al meglio la proprietà float è (più o meno) capire come convivere con i CSS. Dal lato mio, tuttavia, spiegarti al meglio questa proprietà non è per nulla semplice: in molti ci hanno provato ma in pochissimi ci sono riusciti. Per tagliare la testa al toro, leggi questo articolo apparso su Italian A List Apart (la traduzione dall’inglese dell’articolo di Noah Strokes). Vedrai che dopo ti sarà tutto molto più chiaro!