overflow

Se vai a rivederti il capito dedicato a float, fra le possibili soluzioni di ripristino del normale svolgimento dell’HTML ti ho segnalato anche “Impostare overflow:auto; sul contenitore degli elementi float;”.

overflow, è una proprietà che permette di decidere come deve comportarsi il contenuto nel momento in cui supera lo spazio ad esso designato. Ti faccio un esempio: poniamo il caso tu abbia un <div> in cui imposti un’altezza fissa, e che il testo contenuto al suo interno superi per quantità questa altezza. Come si comporterà il <div>? Grazie a overflow puoi deciderlo. I valori che esso può assumere sono:

  • visible; impostazione predefinita, il contenuto in eccesso verrà mostrato al di fuori del suo contenitore;

  • hidden; il contenuto in eccesso verrà nascosto;

  • scroll; il contenuto in eccesso viene nascosto, ma vengono abilitate delle barre di scorrimento per poterlo visualizzare (entrambe le barre di scorrimento);

  • auto; se il contenuto eccede, vengono abilitate le barre di scorrimento solo sulla parte eccedente (ossia, se il contenuto eccede in altezza, verrà abilitata solo la barra di scorrimento verticale).

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

Con questo piccolo trucchetto, quindi, se imposti un overflow:auto; al contenitore di elementi float, potrai ristabilire la normale esecuzione dell’HTML senza l’aggiunta di altri tag. Comodo1!

1. Non sempre è possibile e non sempre funziona... dipende sempre da com’è strutturato il tuo HTML.