disign.it | CSS la proprieta' overflow per sostituire il clear!

Primo piano

CSS la proprieta' overflow per sostituire il clear!

Quante volte in un design complesso ci siam trovati nelle condizioni che il wrapper non adeguasse automaticamente la sua altezza in base ai contenuti? Da qualche parte ci siamo dimenticati di chiudere un float attraverso l'uso della proprietà CSS clear: both!
E anche se tutto funziona perfettamente abbiamo dovuto utilizzare un DIV in più, strumentale all'applicazione del clear.

Quanti sanno che si può molto semplicemente utlizzare la proprietà overflow per superare il problema?

Nella prima demo che vi propongo potete vedere in sequenza l'errore causato dalla dimenticanza del clear, la soluzione classica con l'aggiunta di un DIV extra per applicare il clear e la soluzione più semplice e breve di applicazione dell'overflow: auto al wrapper.
Nella seconda demo potete vedere come sia possibile invece utilizzare la proprietà overflow: auto per fare in modo che un contenuto di testo non contorni un'immagine a cui abbiamo applicato un float: in questo modo evitiamo di dover assegnare al box del testo una larghezza e un altro float!

pubblicato Mercoledì 11 Maggio 2011

Hai trovato quest'articolo interessante? Abbonati ai Feed RSS