Warum verschwindet der obere Rand eines Elements nach einem Float manchmal?

Der ignorierte obere Rand von HTML-Elementen nach Floats

In der Webentwicklung ist es üblich, Floats zu verwenden, um Elemente nebeneinander zu positionieren. Wenn jedoch ein schwebendes Element vorhanden ist, kann der obere Rand eines nachfolgenden Elements in bestimmten Browsern ignoriert werden.

Dieses Verhalten ist auf die Tatsache zurückzuführen, dass schwebende Elemente aus dem normalen Fluss des Dokuments entfernt werden, was zu einer nachfolgenden Blockierung führt -Level-Elemente fließen, als ob der Float nicht vorhanden wäre. Dies kann dazu führen, dass das zweite Element optisch an das erste angrenzt, obwohl es einen festgelegten oberen Rand hat.

Betrachten Sie das folgende Beispiel:

<div>
<p>In diesem Szenario wird das zweite Div erwartet vom ersten durch einen oberen Rand von 90 Pixel getrennt sein. In Firefox oder IE8 scheint das zweite Div jedoch das erste zu berühren.</p>
<p><strong>Lösung: Umbrechen mit internem Leerraum</strong></p>
<p>Um dieses Problem zu beheben, ist eine häufige Vorgehensweise erforderlich Die Lösung besteht darin, das zweite Div in ein anderes Element einzuschließen. Dieses Wrapper-Element fungiert als Puffer zwischen dem zweiten Div und dem Float-Element. Darüber hinaus sollte der Leerraum des Wrappers durch Auffüllen und nicht durch Margin angegeben werden. Dadurch wird sichergestellt, dass die Polsterung nicht durch externe Elemente beeinträchtigt wird.</p>
<p>Hier ist eine modifizierte Version des Beispiels:</p>
<pre class="brush:php;toolbar:false"><div><p>Mit dieser Änderung erstellt das Wrapper-Element oben eine Polsterung von 90 Pixeln , wodurch das zweite Div wie beabsichtigt effektiv vom schwebenden Element getrennt wird.</p></div>