disign | CSS la proprieta' overflow per sostituire il clear! | a digital sign for a best design!
A digital sign for a best design

Articolo stampato da http://disign.improntedigitali.it/css-la-proprieta-overflow-per-sostituire-il-clear-147-3-1.html

© Luca Frassineti

Css tips and tricks 7.321 visualizzazioni

CSS la proprieta' overflow per sostituire il clear!

11/05/2011

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!

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 


Questo sito è totalmente privo di pubblicità, se volete sostenere questa inziativa, potete scegliere di fare una piccola donazione libera:


© 2009 - 2024 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.