Uno dei problemi che troviamo quando andiamo ad utilizzare degli elementi in Float è quello di avere successivamente il contenitore senza altezza predefinita e quindi avere un layout semi-spaccato.
Un esempio classico è un box con sfondo e al suo interno due elementi in float. Il box risulterà alto pochi pixel invece di racchiudere gli elementi al suo interno.
Per ovviare a questo problema una tecnica era quella di usare un <div>, o uno <span> o addirittura un <br /> con una classe che conteneva la regola:
clear: both;
Il risultato era ottimo, ma diciamoci la verità, il markup lo rovinava e ci trovavamo degli elementi in più che proprio ci stavano male.
Adesso (anche se in verità, da un bel po’) si può usare solo una classe CSS da assegnare al contenitore, che contenga queste regole:
.clear:after {
clear : both;
display : block;
content : “.”;
height : 0;
visibility : hidden;
}
.clear {display:inline-block;}
.clear {display:block;}
* html .clear {height: 1%;}
Ma che cosa fa?
Seplicemente indicano di aggiungere un carattere ‘.’ (il punto) alla fine dell’elemento, con altezza 0 pixel poi lo nasconde e cancella il float (clear: both).
Crea quindi via CSS quell’elemento in più che tanto dava noia prima al markup.
Le altre regole sono dei fix per i browser poco compatibili.
Di seguito un’esempio dell’html:
<div style=”background: #ccc” class=”clear”>
<div style=”float: left; padding: 5px”>
Sinistra
</div>
<div style=”float: right; padding: 5px”>
Destra
</div>
</div>