Gestire i float con CSS

Float devo ammetterlo non è la mia proprietà preferita. L’ho sempre un po’ disprezzata, perché ho sempre trovato il fatto che necessitasse di un “hack” per poterlo far funzionare assurdo.

Quando si parla di float o elementi flottanti si fa riferimento alla proprietà float. Questa proprietà CSS originariamente fu concepita per allineare le immagini all’interno di un blocco di testo. Con il tempo i developer si resero conto che tutto era flottabile e quindi float divenne presto una proprietà usata anche per creare layout multicolonna.

Fortunatamente, con l’avvenuto di flexbox e grid, float è tornato al suo compito originale. Ora è considerato un metodo legacy per la creazione dei layout e se la fortuna è dalla tua parte potresti trovarlo in qualche vecchio sito web.

Ecco qui un piccolo esempio:

1<h1>Layout a 2 colonne</h1>
2<div>
3  <h2>Prima colonna</h2>
4  <p>
5    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
6    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
7    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
8    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
9    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
10    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
11    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
12    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
13    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
14    eget fermentum sapien.
15  </p>
16</div>
17<div>
18  <h2>Seconda colonna</h2>
19  <p>
20    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
21    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
22    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
23    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
24    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
25    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
26    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
27  </p>
28</div>

1body {
2  width: 90%;
3  max-width: 900px;
4  margin: 0 auto;
5}
6
7div:nth-of-type(1) {
8  width: 48%;
9  float: left;
10}
11
12div:nth-of-type(2) {
13  width: 48%;
14  float: right;
15}

Come funziona float

L’elemento floattante (quello alla quale è applicata la proprietà float) viene rimosso dal normale flusso del documento e spostato in uno dei lati (destro o sinistro) del contenitore genitore.

Ogni elemento che segue l’elemento flottante gli girerà intorno, riempiendo lo spazio vuoto.

Qualora si volesse impedire questo comportamento di riempimento è possibile usare la proprietà clear.

clear ha tre possibili valori:

• left: per gli elementi flottanti a sinistra
• right: per gli elementi flottanti a destra
• both: per entrambi i lati

Il clearfix

All’inizio facevo riferimento al fatto che per poter far funzionare i float come si deve c’è bisogno di un “hack”, stavo facendo riferimento al clearfix.

Cosa accade quando ad un elemento più alto dell’elemento che lo contiene viene applicata la proprietà float? Un casino.

Come si può notare dall’immagine l’elemento in rosso “rompe” il contenitore. Questo in realtà è normale dal momento che l’elemento flottante viene rimosso dal flusso normale del documento.

Per poter risolvere il problema, tanti anni fa è stata trovato un metodo che preso con il tempo il nome di clearfix.

Quando non c’erano gli pseudo elemento ::before e ::after si inseriva un elemento HTML vuoto in fondo al contenitore alla quale bisognava applicare questo clearfix. Con l’avvento dei due pseudo elementi menzionati è stato possibile far evolvere questo “hack” in qualcosa di meno invadente ed è ancora molto utilizzato oggi e ha questo aspetto:

1.wrapper::after {
2   content: “”;
3   display: table;
4   clear: both;
5}

Aggiungendolo al codice CSS dell’esempio, ecco il risultato

Il problema è risolto. Consiglio la lettura dell’articolo di css-tricks su come funzione clearfix e la sua evoluzione.

Voglio darti io una buona notizia, con le più recente introduzioni fatte in CSS possiamo evitare del tutto il clearfix usando la proprietà display: flow-root. Al momento è supportata da tutti i principali browser e fa esattamente la stessa cosa che fa clearfix, senza però usare clearfix che è a tutti gli effetti un workaround e non una vera e propria soluzione.

Ciò che fa flow-root è creare un block formatting context che CSS userà per renderizzare correttamente gli elementi. Non ci sono effetti collaterali nell’uso di questa proprietà quindi vai sereno.