Gebruik Geen overflow:hidden Meer Voor het Clearen van Floats!

Afgelopen weekend gaf ik op PFCongres 2011 een presentatie over efficiënt gebruik van CSS. Toen ik begon over floating elementen die je kunt clearen met de clear & clearfix classes werd ik door iemand in het publiek gewezen op de clearing techniek "overflow: hidden". Ik moest eerlijk toegeven dat ik nog nooit van deze techniek had gehoord en dat ik er later onderzoek naar zou doen. Na dit onderzoek kwam ik er echter achter dat ik jaren geleden in het boek: 'Pro CSS Techniques' wel degelijk kennis had gemaakt met de 'overflow: hidden' techniek maar desalnietemin de juiste keuze had gemaakt door de clearfix methode te verkiezen boven de 'float everything' en de 'overflow:hidden' technieken. Alhoewel de 'overflow: hidden' techniek qua markup de beste keus lijkt kent de techniek ook een aantal problemen.

Image credits: cHOpiL

De verschillende bekende methodes

Float everything
Floating elementen zijn eigenlijk het beste te clearen door ook de parent te laten floaten. Op deze manier is er geen extra markup nodig. Deze techniek komt alleen wel met een nadeel.

Stel dat je een foto in een blockquote element naast zowel de titel, de quote zelf, en de afsluiting/titel van de desbetreffende persoon wil plaatsen. De methode die je hiervoor gebruikt is door in je CSS-bestand style: "float: left" aan "blockquote p img" te hangen. Vervolgens dien je ook de "p" en de "blockquote" elementen te laten floaten als je wil dat deze niet buiten de parent zullen vallen. Op deze manier kun je doorgaan tot je het "body" element hebt bereikt. Het resultaat is een 100% floatende website.

Dit is niet de beste techniek vanwege de verwarring die het kan veroorzaken. Deze techniek is zeker prima in te zetten in bijvoorbeeld horizontale menu's en dergelijke, maar zorg er dan wel voor dat het parent element van je menu wel een andere clearing methode heeft.

Overflow: hidden
Hoewel dit in eerste instantie een hele goede techniek leek komt de techniek toch met wat nadelen. Zo is het onmogelijk om bepaalde elementen met "position: absolute" buiten de container te plaatsen welke de "overflow: hidden" waarde bevat. De reden hiervoor is dat alles wat buiten deze container valt uiteraard "hidden" zal zijn. Dit is natuurlijk een erg beperkende factor! Uiteraard is het ook mogelijk om "overflow: auto" te gebruiken in plaats van hidden maar hiermee zullen er in bepaalde gevallen scrollbars ontstaan. Een andere keuze is dan nog de keuze voor "overflow-y: hidden" zodat er in de hoogte zaken zullen verdwijnen, maar in de breedte niet. Deze oplossingen komen bij mij over als krampachtige manieren om toch de fijne, simpele "overflow: hidden" techniek in te kunnen zetten. De waarheid is echter dat je in iedere situatie goed moet uitzoeken welke overflow je het best in kunt zetten. Vergeet hierbij niet rekening te houden met de toekomst!

Veel voorstanders van deze techniek gebruikten de techniek overigens alleen op kleinere elementen waarbij duidelijk was dat er geen problemen konden onstaan. Bij horizontale suckerfish menu's, inline pop-ups en tooltips werd er toch al vaak de clearfix methode gebruikt. Maar ook deze voorstanders zijn er intussen achter dat de "overflow: hidden" techniek steeds lastiger in te zetten is. Nu CSS3 flink op komst is komen er namelijk nog meer negatieve beperkingen boven water. Veelal gebruikte CSS3 waarden zijn "box-shadow" en "text-shadow". Deze CSS3 shadows vallen buiten de "box" en dus ook buiten het "overflow: hidden" veld en zullen daarom dan ook niet zichtbaar zijn.

Op 10 december 2009(!) gaf Andy Ford in zijn blog: "Saying Goodbye to the overflow: hidden Clearing Hack" al aan dat hij - als voormalig groot voorstander van de "overflow: hidden" techniek - deze techniek toch vaarwel moest zeggen. De druppel die de emmer deed overlopen was ook in zijn geval CSS3. Hij heeft toen een demo opgezet waarin hij laat zien dat shadows en transforms niet echt grote vrienden zijn met de "overflow: hidden" of "overflow: auto" technieken.

Clearfix
Het grote voordeel van de clearfix methode is dat je altijd en overal zonder problemen "position: absolute", tooltips, CSS3 en alle andere besproken CSS zaken kunt gebruiken. Het nadeel is dat er extra HTML Markup nodig is. Vele mensen zijn hier dan ook erg skeptisch over. Uiteraard is hier wel wat aan te doen. Wanneer je twee containers gebruikt zou je de binnenste container altijd dezelfde naam kunnen geven:

Op deze manier kan je de :after selector aan wrap hangen waardoor de .clearfix class overbodig is. Wanneer er in bepaalde gevallen slechts één container nodig is zou je ook het volgende kunnen doen:

.wrap:after,
#header:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

Conclusie

De beste afsluiting zou een opbiechting zijn dat ik bekeerd ben en alleen nog maar gebruik ga maken van een aangepaste clearfix techniek met zo weinig mogelijk extra markup. Feit is alleen dat ik altijd al gebruik heb gemaakt van deze in mijn ogen beste techniek. De reden voor deze blog is dan ook het overhalen van diegenen die nog wel heilig geloven in de "overflow: hidden" techniek. Deze techniek is zeker met tientallen voorbeelden te verdedigen. Voor mijzelf hou ik het echter toch het liefst eenvoudig en verkies het gebruik van slechts één techniek boven een aantal verschillende, zolang deze techniek de markup dan wel zo min mogelijk aantast!