Margins en float

Margins overlappen bij standaard block-level elementen:

• De marges tussen twee onder elkaar staande divs (dus block-level, niet gepositioneerd of met float) overlappen
• De margin-top van de eerste alinea in een div overlapt met de margin-top van de div zelf.
• De margin-left van de alinea overlapt niet met de margin van de div .Dit geldt ook voor andere ingesloten elementen.

Voorbeeld hierrvan zie je in de eerste twee vierkante blokken hieronder.

Zodra je het element een float geeft, zal alle inhoud van dat element binnenin het element blijven. Dan steekt er geen margin meer naar buiten. Dat zie je in de onderste twee vierkante blokken. Ook als er een ander element met float is ingesloten zal de containing block ook íie binnen boord houden door mee te rekken met de inhoud.

Met float voeg je Block Formatting Context (BFC) toe aan een block-level element. Misschien kan je Block Formatting Context (BFC) het beste vertalen met opmaak van een kader in samenhang met de omliggende kaders. Met de volgende combinaties van eigenschappen en waardes voeg je BFC toe aan een element:

• float: left
• float: right
• position: absolute
• display: inline-block
• display: inline-table
• display: table-cell
• display: table
• overflow: auto
• overflow: scroll
• overflow: hidden

Meer weten?

Meer over Block Formatting Context

Waarom een div in IE6 en IE7 wel zonder clear meerekt met een ingesloten floated block en in de moderne browsers niet

Zie ook de artikelen hierover van Zoe Gillenwater en Philippe Wittenbergh over dit onderwerp.