Pourquoi la marge supérieure d'un élément après un flottant disparaît-elle parfois ?

La marge supérieure ignorée des éléments HTML après les flottants

Dans le développement Web, il est courant d'utiliser des flottants pour positionner les éléments les uns à côté des autres. Cependant, lorsqu'un élément flottant est présent, la marge supérieure d'un élément suivant peut être ignorée dans certains navigateurs.

Ce comportement vient du fait que les flottants sont supprimés du flux normal du document, provoquant le blocage suivant -level éléments pour circuler comme si le float n'existait pas. Cela peut avoir pour conséquence que le deuxième élément soit visuellement adjacent au premier, malgré une marge supérieure spécifiée.

Considérons l'exemple suivant :

<div>
<p>Dans ce scénario, le deuxième div est attendu être séparé du premier par une marge supérieure de 90px. Cependant, dans Firefox ou IE8, le deuxième div semblera toucher le premier.</p>
<p><strong>Solution : envelopper avec un espace blanc interne</strong></p>
<p>Pour corriger ce problème, une solution courante La solution consiste à envelopper le deuxième div dans un autre élément. Cet élément wrapper agira comme un tampon entre le deuxième div et l'élément flottant. De plus, l'espace blanc du wrapper doit être spécifié en utilisant un remplissage plutôt qu'une marge. Cela permet de garantir que le remplissage n'est pas affecté par des éléments externes.</p>
<p>Voici une version modifiée de l'exemple :</p>
<pre class="brush:php;toolbar:false"><div><p>Avec cette modification, l'élément wrapper établit un remplissage de 90 px en haut , séparant efficacement le deuxième div de l'élément flottant comme prévu.</p></div>