Un problema comune con gli elementi float è che il contenitore non si adatta all’altezza del contenuto.
Cosa comporta questo? Che se vogliamo aggiungere un bordo o un colore di sfondo al contenitore non riusciremo a vederlo poichè l’altezza del div sarà pari a 0.
Inserendo nel nostro file html uno stile simile a questo:
div.container { border: 1px solid #000000; }
div.left { width: 45%; float: left; }
div.right { width: 45%; float: right; }
visualizzeremo una cosa simile:
Ciò che vogliamo, invece, è che il div contenitore si adatti al suo contenuto. Una vecchia soluzione (compatibile con tutti i browser) era mettere un div alla fine del contenuto con lo stile clear:both, come da figura seguente:
Una soluzione più pulita senza aggiungere elementi html è quella di aggiungere allo stile del box contenitore queste righe di codice:
div.container { border: 1px solid #000000; overflow: auto; width: 100%}
Alcuni punti che meritano attenzione:
- Il trucco funziona con 3 dei 4 valori della proprietà overflow:auto,hidden, scroll.
- Alcuni browser necessitano della proprietà width o height per il div contenitore
- Il browser potrebbe visualizzare le scrollbar quando il contenuto è maggiore rispetto alla larghezza specificata.
L’uso della proprietà width o height è richiesta per poter funzionare con i browser IE ed Opera, altrimenti il primo non adatterebbe il contenitore al contenuto, mentre il secondo nasconderà completamente il contenuto.
[ fonte: http://www.quirksmode.org/css/clearing.html ]
