De afbeelding naast deze tekst heeft een float: left waardoor deze tekst er automatisch naast komt te staan, mits er voldoende ruimte is. Als er veel tekst is en weinig ruimte naast de afbeelding, dan komt de tekst uiteindelijk onder de afbeelding te staan. Maak het venster maar eens heel smal, dan zie je de tekst beneden de afbeelding schuiven.
Deze tekst heeft een clear: left die een eind maakt aan alle voorgaande float: left waardoor dit onder de afbeelding komt te staan, ook bij een breed venster. De afbeelding hiernaast heeft een float: right en staat dus rechts. Deze tekst mag zich door die float schikken in de beschikbare ruimte links van de afbeelding.
Doordat deze alinea een float heeft, overlapt de margin-top hiervan niet meer de margin-bottom van de h2 erboven, maar komen de marges onder elkaar te staan. Daardoor ontstaat een grotere marge tussen deze alinea en de h2 erboven. De blauwe alinea hiernaast heeft geen float dus de margin daarvan en die van de h2 overlappen elkaar nog wél. Dat geeft een verschil aan de bovenkant tussen de rode en blauwe alinea's. Door de margin-top van deze rode alinea op 0 te zetten maak je dit verschil ongedaan. In Internet Explorer 7 en ouder speelt dit niet, want deze browsers gaan anders om met margins. Let daarom op: je kunt het ook oplossen door de h2 een margin-bottom: 0 te geven, maar dan sluit in IE7 en ouder de rode alinea ineens strak aan bij de h2 erboven, nu dus helemaal zonder marge. Voor blauw verandert er niets, dus deze heeft nog wel een margin met de h2 erboven. Je hebt hetzelfde probleem als eerst maar nu omgekeerd. Daarom heeft de eerste optie de voorkeur: margin-top: 0 voor deze rode alinea. Vanaf IE8 is in ieder geval dít weergaveprobleem opgelost en gedraagt IE zich gelijk aan de andere browsers.
Duis aute irure dolor velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, quis nostrud exercitation sunt in culpa. Excepteur sint occaecat sed do eiusmod tempor incididunt duis aute irure dolor. Eu fugiat nulla pariatur. Cupidatat non proident, consectetur adipisicing elit, qui officia deserunt. Excepteur sint occaecat sunt in culpa ut labore et dolore magna aliqua. Mollit anim id est laborum. In reprehenderit in voluptate quis nostrud exercitation sed do eiusmod tempor incididunt. Consectetur adipisicing elit, ullamco laboris nisi mollit anim id est laborum. Excepteur sint occaecat ut enim ad minim veniam, sed do eiusmod tempor incididunt. Consectetur adipisicing elit, qui officia deserunt in reprehenderit in voluptate. Mollit anim id est laborum. Duis aute irure dolor eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamco laboris nisi duis aute irure dolor ut enim ad minim veniam. Eu fugiat nulla pariatur. Consectetur adipisicing elit, quis nostrud exercitation mollit anim id est laborum. Velit esse cillum dolore excepteur sint occaecat qui officia deserunt. Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Ullamco laboris nisi excepteur sint occaecat consectetur adipisicing elit. Ullamco laboris nisi ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt duis aute irure dolor lorem ipsum dolor sit amet. Consectetur adipisicing elit, cupidatat non proident, sunt in culpa. Excepteur sint occaecat duis aute irure dolor ut aliquip ex ea commodo consequat. In reprehenderit in voluptate ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Qui officia deserunt lorem ipsum dolor sit amet. Duis aute irure dolor ut labore et dolore magna aliqua. Quis nostrud exercitation eu fugiat nulla pariatur. Excepteur sint occaecat lorem ipsum dolor sit amet, ut enim ad minim veniam.