CSS: Flyte blokk-elementer uten clearfix

Unngå bruk av ekstra HTML-kode for å få blokk-elementer til å strekke seg rundt blokk-elementer inni seg selv, hvor blokk-elementene på innsiden flyter, ved en enkel regel i stilarket (CSS-filen). Jeg har tidligere brukt noe sånt som dette

<div class="clearBoth"></div>

hver gang jeg har blokk-elementer som flyter inni et annet blokk-element. Men ved bruk av :after

:after { content: "."; display: block; height: 1%; clear: both; visibility: hidden; }

er dette en saga blott! Oppdatert: Dette virker til og med i IE 6 :) (iallefalll i min multiple IP IE 6)

Her er et lite eksempel

Si at du har et blokk-element (f.eks. en <div>) som inneholder to blokk-elementer hvor den ene flyter til venstre, og den andre flyter til høyre. HTML-kode:

<div id="container">
	<div id="venstreBlokk">Denne flyter til venstre</div>
	<div id="hoyreBlokk">Denne flyter til høyre</div>
</div><!-- #container -->

Med en cascading style sheet (CSS-fil) som under slipper vi en <div class="clearBoth"></div> før </div><!-- #container -->

#container { padding: 10px; border: 1px solid #ddd; }
#container:after { content: "."; display: block; height: 1%; clear: both; visibility: hidden; }
#venstreBlokk { width: 100px; height: 100px; background-color: #eeffcc; float: left; }
#hoyreBlokk { width: 100px; height: 100px; background-color: #eeffcc; float: right; }

Resultatet

Resultatet kan du se i den vedlagte filen (Denne filen er ikke oppdatert med fiks for IE 6).