Nu merk ik dat overflow:hidden hetzelfde resultaat oplevert, terwijl dit juist niet het geval zou moeten zijn (w3schools: the overflow is clipped, and the rest of the content will be invisible).
Nu merk ik dat overflow:hidden hetzelfde resultaat oplevert, terwijl dit juist niet het geval zou moeten zijn
Heb het bovenstaande verkeerd begrepen. Door het gebruik van overflow:hidden wordt de betreffende div ook volledig geselecteerd, that's it.
Maar welke van de 2 kun je het beste gebruiken?
Het resultaat in alle bekende browsers lijkt mij hetzelfde.
Een pseudo element gebruiken is mijn inziens echter een truc, niet echt netjes.
Wat vinden jullie?
Uit ervaring weet ik dat bootstrap een :after element gebruikt op haar elementen om de clearfix toe te passen. Sinds ik daar achter ben gekomen gebruik ik dit ook. Heb hier nooit problemen mee gehad (oudere browsers zoals IE7 en IE8 ondersteun ik inmiddels niet meer omdat ik hier de meerwaarde niet van in zie).
De overflow:hidden; zorgt er voor dat wanneer je een element (eventueel later toevoegd) in het boxje hebt staan (div) en die moet overlappen zoals een submenu of een ander effect dan werkt dit dus niet meer. Probeer om overflow:hidden; zoveel mogelijk te vermijden tenzij je het echt nodig hebt. Ik raad dus aan om voor de :after te kiezen (met: clear:both; display:table; content:'';) of om voor de safe manier te gaan een element toevoegen met de class clear-both oid. welke je dan dezelfde attributen meegeeft als de after element behalve de content:'';
Je kunt ook gewoon op je container een .container:after {clear:both; display:table; content:'';} gebruiken. Heeft hetzelfde effect en kun je later altijd nog met een element buiten je container (bij een hover, via javascript o.i.d.).
Overflow:hidden; wordt op deze manier niet gebruikt waar die voor bedoeld is. Alhoewel veel developers het wel op deze manier 'snel' en 'slordig' oplossen.
Aha, je hebt een punt.. en je ontkomt er gewoon niet aan om soms een pseudo element te gebruiken. Voornamelijk bij een zwevend element met variabele hoogte.
Ik ga overflow:hidden toch maar weer vervangen door een :after element.
Mocht je oudere browsers willen ondersteunen die geen pseudo elementen ondersteunen. Kun je altijd een divje gebruiken in plaats van een pseudo element. Een after element is in principe niets anders als een via CSS toegevoegd element (niet deel uitmakend van de DOM, mocht je met javascript pseudo elementen willen aanpassen).
