Float float och mer float!

Hade en diskussion med en kompis för något år sedan om floatade element och varför tre eller fler floats inte fungerar utan fler än en container. Enligt honom så var man tvungen att nästla flera wrappers beroende hur många floats i sidled man ville ha. Jag funderade inte mer på det men det finns tydligen ett sätt!

Tänk att vi har sex stycken element som vi vill ska flyta från vänster:
[code language="html"]

Nu vill vi att alla element ska lägga sig fint jämsides. CSS fixar som vanligt biffen.
[code language="css"]
#wrapper { background-color: #ccc; min-height: 200px; float:none; }
#float1, #float3, #float5 { background-color: red; }
#float2, #float4, #float6 { background-color: blue; }
#float1, #float2, #float3, #float4, #float5, #float6 { float: left; width: 200px; height: 200px; }

Som ni ser är alla element float: left, med storlek 200 pixlar. Det extra som ni bör notera är float: none; i #wrapper vilket är ett ful-hack för att förhindra ett element att flyta iväg (enkelt förklarat).

Full demo på /lab/float sidan.