Elementi flottanti con i CSS. Assegnare la proprietà float per gestire i box

Se in una pagina disponiamo, per esempio, di un box ed abbiamo anche del testo, al primo sarà data una posizione flottante a sinistra, cioè: float: left; ed al paragrafo un normale margine di 5px ed un padding di 10px. Ecco l'esempio; questo, invece, è il codice del box:

.gabbia {
float: left;
padding: 10px;
margin: 5px;
background-color: #f60;
border: 1px solid #000;
width: 40%;
border: 1px solid #000;
}

Una cosa da tenere ben presente è che il contenuto dell' elemento che segue si dispone intorno all' elemento flottante. Quindi un bordo, una immagine di sfondo oppure un colore di sfondo, si disporranno sotto l' elemento galleggiante. Partendo dalla pagina htm precedente, se indicassimo un colore di sfondo per il paragrafo e cioè:

p {
margin: 5px;
padding: 10px;
background-color: #fff;
}

avremmo il risultato che è possibile vedere in questo file. Se non ci piace questo effetto, possiamo applicare la proprietà clear: left all' elemento che segue, sempre il paragrafo in questo caso, per i lati destro e sinistro, oppure per entrambi. In questo modo, l' elemento che segue, apparirà sempre sotto l' oggetto flottante; come questo file di esempio.

Notare bene una cosa: il box flottante deve avere una misura dichiarata e non è facoltativo. Le specifiche CSS richiedono che per gli elementi flottanti venga specificata una larghezza, attraverso la proprietà width. Nonostante una gabbia galleggiante venga "estratta" dal flusso normale della pagina, non è posizionata come se fosse un box posizionato in modo "assoluto", nè, tantomeno, ignora gli elementi intorno ad essa. Solo che ha un diverso tipo di comportamento. Una gabbia galleggiante apparirà sulla riga dichiarata nel codice; se il <div> dell' esempio precedente avesse seguito il paragrafo, avremmo avuto una gabbia posizionata a sinistra sotto il paragrafo.

Solo gli elementi che seguono la gabbia cominceranno e disporsi al suo fianco, se c'è spazio. Ecco questo file di esempio. È stata semplicemente invertita la dichiarazione della posizione nella pagina.

Per vedere meglio questo concetto, facciamo l' esempio che in una pagina abbiamo 4 box definiti attraverso una classe e tutti e quattro avranno un float: left: ecco cosa ne viene fuori, come si può vedere nell' esempio. Ogni box viene posizionato alla stessa altezza di quello precedente e non più in alto; inoltre viene posto a sinistra di tanto, quanto i margini della finestra del browser lo permettono.

Adesso proviamo a spostare il "galleggiamento" tutto a destra: ecco il file di esempio. Si noti il box n° 4 come è a sinistra: accade ciò in quanto la prima gabbia è stata messa più a destra possibile, quindi il secondo gli è accanto come se fosse un elemento successivo. Siccome quella gabbia è un elemento galleggiante, è scivolato "lontano" a seconda di quanto glielo permettono i margini della finestra; anche per la terza e quarta gabbia vale lo stesso discorso.
Alla prossima.