Capita spesso di sistemare all’interno di un div altri div con la proprietà float settata, e di trovarsi davanti al problema del div che non si estende o assume l’altezza uguale a quella dei div al suo interno, cioè quelli con la proprietà float settata!
Come possiamo risolvere questo spiacevole inconveniente??
Grazie ai css con l’uso di uno pseudo-elemento nel caso specifico :after
definiamo una semplice classe da applicare al div contenitore, volendo potete intervenire direttamente sull’oggetto non cambia niente, ma se abbiamo altri contenitori nella stessa situazione possiamo riutilizzare la classe e quindi senza andar a riscrivere le stesse cose per un altro oggetto.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Spieghiamo brevemente queste poche righe:
con :after aggiungiamo un qualcosa alla fine del nostro div contenitore.
con content:”.” inseriamo di fatto questo qualcosa che nel nostro caso abbiamo scelto banalmente un puntino.
con display:block settiamo questo qualcosa come elemento di blocco, dato che la proprietà clear non può essere applicata ad un elemento inline.
con height: 0 settiamo l’altezza di questo contenuto a zero in modo che non occupi spazi visibili all’interno del div contenitore.
con clear:both facciamo in modo che questo contenuto si posizioni al di sotto dei div floatati.
ed in fine con visibility:hidden nascondiamo il contenuto stesso.
Potete visionare un esempio a questo link
