Warum funktioniert der obere Rand nach einem schwebenden Element in HTML nicht?

Warum wird der obere Rand eines HTML-Elements nach einem schwebenden Element ignoriert?

In CSS wird ein schwebendes Element aus dem normalen Fluss des Dokuments entfernt, was dies ermöglicht andere Elemente, die man darum wickeln kann. Dieses Verhalten kann jedoch zu unerwarteten Ergebnissen führen, wenn versucht wird, einen oberen Rand auf ein Element nach dem Float anzuwenden.

Gemäß der CSS-Spezifikation gilt: „Da sich ein Float nicht im Fluss befindet, werden nicht positionierte Blockboxen angezeigt.“ erstellt vor und nach dem Float-Box-Fluss vertikal, als ob der Float nicht vorhanden wäre. Daher wird der obere Rand des nachfolgenden Elements bei Browserberechnungen im Wesentlichen ignoriert.

Um dieses Problem zu beheben, besteht ein gängiger Ansatz darin, das nachfolgende Element in einen Container zu packen und Auffüllung auf den Wrapper statt auf den Rand anzuwenden zum Element. Dadurch entsteht effektiv ein interner Leerraum, der unabhängig von externen Elementen bleibt, sodass der obere Rand wie erwartet funktioniert.

Beispiel:

Im Beispiel-HTML-Code unten wird der schwebend

verhindert, dass der Rand des nachfolgenden

vom Inkrafttreten:

<div>
<p>Um dies zu beheben, können wir das nachfolgende </p>
<div> umschließen. in einer Hülle und wenden Sie stattdessen Polsterung auf die Hülle an:<pre class="brush:php;toolbar:false"><div><p>Durch die Verwendung dieser Technik erzeugen wir effektiv einen „Puffer“ zwischen dem schwebenden Element und dem nachfolgenden Element und stellen so sicher, dass der obere Rand ordnungsgemäß angewendet wird und durchgesetzt.</p></div>