De Clearfix

Heel handig en standaard in mijn css-resetfile. Een class die toegevoegd aan een block-element (Meestal een div) er voor zorgt dat hij 'opdikt' met floating content. Het probleem met floating elements is dat ze niet 'gezien' worden door het omhullende block-element. Als bijv. een div enkel en alleen floats bevat dan heeft die div nog steeds een height van 0px. Waarom hebben ze dat zo gedaan? Omdat oorspronkelijk vooral plaatjes gefloat werden die tussen de tekst in stonden. Men wilde dan dat die plaatjes keurig omsloten zouden worden door tekst. Als nu b.v. een p (paragraaf) beindigd was voordat de tekst 'voorbij' het plaatje was dan kreeg je grote stukken lege ruimte. Immers de p kreeg minimaal de hoogte van het plaatje en als de tekst onvoldoende was om dat te vullen dan bleef dus ruimte leeg. Daarom heeft men het zo gedaan dat de inhoud van het blockelement wel mooi om het drijvende element heen vloeit maar het blockelement zelf kreeg de hoogte van zijn eigen niet-floatende content. Dit staat heel mooi uitgelegd op http://www.complexspiral.com/publications/containing-floats/

Op web pagina's worden vaak kolommen gebruikt die zwevend naast elkaar worden gezet. Als je nu onder die kolommen nog b.v. een footer kwijt wil dan komt het slecht uit dat die floats-omhullende div een hoogte van 0 heeft want dan vallen die zwevende elementen over de footer heen. Hiervoor zijn een aantal oplossingen. Je kunt het omhullende element ook weer zwevend maken dan worden de floats wèl gezien maar vaak verleg je hier het probleem alleen maar mee. Vaak werd een <hr> toegevoegd met width:100% en clear:both. Of gewoon een <div> met style="clear:both". In de html werd dat dan verzorgd door een <div class="clear"> en de css verzorgde de rest. Semantisch is het niet zo mooi om elementen toe te voegen enkel en alleen voor de layout daarom is het idee van de clearfix class wel mooi. Deze gebruikt het css pseudo-element :after om die <div class="clear"> toe te voegen. Wat doet :after eigenlijk precies? Deze voegt content toe aan de content van het betreffende block. dus de toegevoegde content komt nog wel binnen het block waarvoor die 'after' is gedefinieerd! Dat is precies wat we nodig hebben: Zo kunnen we css zelf een div met class="clear" toe laten voegen. In dat geval kennen we die float-wrapper zelf een class="clearfix" toe. In dat geval worden de eigenschappen van het block-element zo aangepast dat hij wel netjes de inhoud omvat.

Het volgende scriptje komt van http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/Deze verwijst naar het originele script en claimt deze te hebben verbeterd. Op Quirksmode wordt uitgelegd wat de commented backslah hack is en waarom die niet meer nodig is. Er is genoeg over te vinden. In mijn resetfile (met dank aan Arjan) wordt precies dezelfde gebruikt als die hieronder. Helemaal onderaan staat een nog simpelere afkomstig van http://css-tricks.com/snippets/css/clear-fix/. Deze maakt gebruik van de enkel in IE bekende zoom-eigenschap.