Met float voeg je nieuwe block formatting context (BFC) toe aan een element. Misschien kan je block formatting context het beste vertalen met opmaak van een kader in samenhang met de omliggende kaders. Ik stel me daar het volgende bij voor. Een block-level element is van zichzelf zo breed als de beschikbare breedte en het staat geen andere elementen naast zich toe op dezelfde regel. Als je er een float aan geeft dan doe je een aanpassing in de layout. Datzelfde doe je als je het een position: absolute geeft, of een andere display of een overflow. Je voegt eigenschappen toe die betekenis hebben voor de opmaak van het element in relatie tot de de omliggende elementen. Dus het gaat hier niet om een kleur, een rand, de afmeting of een lettertype of iets dergelijks.
Ik heb een float: left.
Zie dat de margin-top van de h2 hier binnen de div valt. Dat komt doordat de div toegevoegde block formatting context heeft (hier is dat float).
Deze div is in de flow van de pagina en heeft in CSS alleen een achtergrondkleur en een margin-top gekregen. De (standaard) marges van de h2 vallen buiten de div en overlappen de margin van de parent div. Het geheel zit in #wrapper die in CSS alleen een grijze achtergrond heeft gekregen. De margin-top van de h2 valt ook buiten #wrapper. Dit gedrag is standaard voor block-level elementen.
Deze div zal zolang ie nog 'gewoon' block-level is, bij voldoende ruimte, naast de blauwe div-met- float komen te staan. Dat kan je voorkomen door een clear: left aan deze div te geven, de div zal dan onder de blauwe div komen te staan.
Maar er kunnen omstandigheden zijn waarin clear geen optie is. Clear werkt op alle floats die in de HTML-code boven het element-met-clear staan. Als je kiest voor block formatting dan werkt dit uitsluitend op floats binnen dezelfde parent. En dat kan heel handig zijn.
In deze groene div is display: inline-block gebruikt om te clearen. Divs met toegevoegde BFC overlappen niet meer (ook hun margins niet). Dus deze div gaat in zijn geheel naast de blauwe div-met-float staan. Maar omdat hij geen vaste breedte heeft kan de ingesloten tekst de div oprekken tot de beschikbare breedte van de parent. Nu past ie niet meer naast blauw en is de enige oplossing om er dan maar onder te gaan staan.
Zie dat de de margins van de h2 en de laatste alinea binnen deze div vallen als gevolg van de toegevoegde BFC.
Overigens geeft Dreamweaver zowel in Design View als in Live View geen verandering weer na het toevoegen van de BFC. Dat geeft al aan dat het niet betrouwbaar is. Dat klopt, want alleen in IE8, Firefox, Safari en Opera zie je het effect. In IE6 en 7 niet. Daar is een oplossing voor, voeg voor IE 7 en ouder ook nog een breedte aan deze groene div toe. Maak die zo groot dat ie niet meer naast de blauwe div past, in dit geval 100%.
De eenvoudigste manier om het gedrag van de elementen in je CSS layouts te begrijpen, is om die elementen onder te verdelen in block-level en inline. Als je weet wat de specifieke eigenschappen zijn van beide, zal je veel van wat je ziet gebeuren op het beeldscherm kunnen verklaren. Vervolgens is de oplossing meestal gauw gevonden.
Als aanvulling is er nog een andere verdeling mogelijk. Misschien is deze uitleg iets complexer maar als je die eenmaal onder de knie hebt, verklaart het de vragen die nog overbleven. Want waarom vallen margins de ene keer binnen een div en de andere keer erbuiten? En wat is de oorzaak van de ruimte tussen bijv. de kop en de div eronder? En waarom treden die verschijnselen niet op ien IE7 en ouder? Als toegift beschik je, als je eenmaal een layout op deze manier kunt benaderen, over een extra optie voor je layout. Want een block-level element met de juiste BFC cleart uitsluitend de elementen binnen dezelfde parent. Dat de aanwezige floats in elementen die zich buiten de parent bevinden niet worden gecleared, kan heel erg handig zijn.
Er zijn twee vormen van block formatting context: het standaard block-level element en een block-level element met toegevoegde block formatting context. Hier volgen de specifieke eigenschappen voor block-level en voor block-level met toegevoegde BFC (deze gelden dus voor alle block-level elementen en niet uitsluitend voor divs):
* Deze eigenschap geldt niet voor alle BFC in alle omstandigheden. Het hangt van de layout af welke BFC wanneer werkt als clear.
De volgende combinaties van eigenschap en waarde kennen nieuwe block formatting context toe aan een block-level element. Iedere combinatie heeft zijn eigen specifieke eigenschappen. Welke je moet kiezen in welke omstandigheid is afhankelijk van wat er op een bepaalde plek nodig is. Je zult bijvoorbeeld kiezen voor overflow: auto bij een element met een vaste afmeting waar je zonodig een scrollbalk wilt zien. Kies dus de meest voor de hand liggende en kijk welke de gezochte oplossing biedt. Als je het principe begrijpt dan vind je je weg en kan je onverwacht gedrag uiteindelijk verklaren. Een interessant voorbeeld is deze layout met 3 kolommen gemaakt naar voorbeeld van Thierry Koblentz.
In IE 7 en ouder geeft een width of een height ook toegevoegde block formatting context. Dat kan grote verschillen opleveren met moderne browsers. Want hierdoor zal een div met een width in IE7 en ouder meerekken met een een ingesloten floated block, en in de moderne browsers gebeurt dat niet.
Waarom margins bij float niet overlappen
Zie ook de artikelen van Zoe Gillenwater en Philippe Wittenbergh over dit onderwerp.
Terug | WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen