clear

Come hai potuto constatare poco fa’, esiste una proprietà particolare che ti permette di risolvere l’inconveniente legato all’utilizzare float, e cioè clear.
Come suggerisce la parola, clear va a “pulire” gli elementi float e ristabilisce il normale flusso di esecuzione. Ossia, va a ristabilire le normali dimensioni degli elementi.
Anche i valori di clear sono molto simili a float:

left; “pulisce” solo gli elementi che sono stati impostati come float:left;
right; “pulisce” solo gli elementi che sono stati impostati come float:right;
both; “pulisce” tutti gli elementi float.

Riprendo l’esempio di prima e ci aggiungo un clear:

See the Pen oDJrc by Giovanni Buffa (@gioppy) on CodePen

In questo modo, quindi, #content prenderà nuovamente le dimensioni del più alto dei due elementi contenuti.

L’elemento che ha la proprietà clear deve essere necessariamente consecutivo agli elementi con proprietà float. Se tu l’avessi messo al di fuori di #content, molto probabilmente il suo elemento consecutivo (nel caso ce ne fosse) sarebbe risultato in posizione corretta, ma l’altezza di #content sarebbe rimasta a 0.

Ricorda che la proprietà clear funziona esclusivamente sui tipi block: sugli inline non ha nessun effetto! Devi quindi usare sempre dei <div>, o comunque degli elementi block? Assolutamente no, e ti prego anche di non utilizzare dei <div> vuoti in questo modo: esiste un’elemento neutro in HTML che è lo <span>, ma che tuttavia è di tipo inline… come fare allora? Nella prossima parte vedremo come trasformare una tipologia in un’altra.