Op het eerste gezicht lijkt er geen zichtbaar verschil met het vorige voorbeeld. Maar dat is er wel:
In een div met float wordt de margin-top (en -bottom) van een ingesloten block-level element binnen de div gëeffectueerd. De standaard margin-top van de h2 steekt nu dus niet meer boven #geel uit maar valt binnen #geel: je ziet dat de tekst iets lager komt te staan in #geel. Het gat blijft aanwezig tussen #groen en #geel. Dit komt door de margin-bottom van de h2 die nog wel onder #groen (want deze heeft geen float) uitsteekt.
Ook hier verschilt de weergave in Dreamweaver met die in IE7 en ouder: daar verandert namelijk niets in de margin bovenin #geel, de tekst komt dus niet lager te staan in #geel.
#groen en #geel zijn divs dus standaard block-level. Doordat #geel een float heeft is het geen block-level element meer maar krijgt het een aantal inline eigenschappen: het wordt inline-block.
De inline eigenschappen van #geel zijn: het past zijn breedte aan de inhoud aan en het staat andere inline elementen naast zich toe.
De block eigenschappen van #geel zijn: je kunt het een width, height, margin-top en -bottom geven.
Een element met float staat niet meer in de flow van de pagina. De elementen zonder float doen dat nog wel en gedragen zich alsof de elementen met float niet bestaan. Dat zorgt er hier voor dat #wrapper niet meer meerekt met #geel. Je kunt dat zien doordat de lichtblauwe achtergrondkleur van #wrapper niet meer zichtbaar is in het gat tussen #groen en #geel. Overigens gaat dat weer niet op in IE7 en ouder: daar rekt #wrapper wel mee.
WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen