Er is ook een uitgebreide uitleg van Block Formatting Context
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%.
Terug | WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen