Die Logik dahinter in der Spezifikation ist umwerfend und beinhaltet ein kompliziertes Zusammenspiel der Regeln für die Freigabe und das Zusammenfallen von Rändern .
Sie sind vermutlich mit dem herkömmlichen CSS vertrauen Box - Modell , in dem die Content - Box innerhalb einer enthaltenen padding - Box innerhalb eines enthaltenen Grenze Feld innerhalb einer enthaltenen Marge Box :
Für Elemente, cleardie auf etwas anderes als eingestellt sind none, kann eine zusätzliche Komponente in dieses Modell eingeführt werden: Abstand .
Andere Werte als "keine" führen möglicherweise zu einer Freigabe . Der Abstand verhindert das Zusammenfallen des Randes und wirkt als Abstand über dem Rand eines Elements.
Mit anderen Worten, das Box-Modell sieht in diesen Fällen wirklich eher so aus:
Aber wann wird die Freigabe eingeführt und wie groß sollte sie sein? Beginnen wir mit der ersten dieser Fragen. Die Spezifikation sagt :
Die Berechnung des Abstands eines Elements, für das "Löschen" festgelegt ist, erfolgt, indem zunächst die hypothetische Position der oberen Randkante des Elements bestimmt wird. An dieser Position wäre die tatsächliche obere Randkante gewesen, wenn die Eigenschaft 'clear' des Elements 'none' gewesen wäre.
Wenn diese hypothetische Position der oberen Randkante des Elements nicht hinter den relevanten Gleitkommazahlen liegt, wird der Abstand eingeführt und die Ränder werden gemäß den Regeln in 8.3.1 kollabiert.
Wenden wir diese Logik auf den Code des Fragestellers an. Denken Sie daran, wir versuchen, die Position des dritten Div im folgenden Code zu erklären (Hintergründe wurden hinzugefügt, um die Visualisierung zu erleichtern):
<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: both; margin-top: 200px; background: blue;">Main Data</div>
Stellen wir uns vor, wie die Spezifikation fordert uns auf, dass clearzu setzen ist noneauf der dritten div statt both. Wie würde dann der obige Ausschnitt aussehen?
<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: none; margin-top: 200px; background: blue;">Main Data</div>
Hier überlappt die dritte Division die beiden schwebenden Divs. Aber warte; Warum ist das so? Sicher, es ist zulässig, dass schwebende Elemente Elemente auf Blockebene überlappen (gemäß der Floats-Spezifikation : "Da sich kein Float im Flow befindet, fließen nicht positionierte Blockboxen, die vor und nach dem Float-Box erstellt wurden, vertikal, als ob der Float nicht vorhanden wäre . " ), aber unser dritter Div hat jede Menge margin-topdrauf und kommt nach den beiden schwebenden Divs; sollten die beiden schwebenden Divs nicht oben am Körper erscheinen und die dritte Div 200px tiefer, weit darunter?
Der Grund, warum dies nicht auftritt, ist, dass der Rand des dritten Divs in den Rand des übergeordneten Divs (in diesem Fall des Körpers) fällt. Das gleiche Verhalten tritt jedoch auf, wenn Sie alle drei Divs in ein übergeordnetes Div einschließen. Die Collapsing Margin-Spezifikation (unten zitiert, wobei einige irrelevante Details weggelassen wurden) sagt uns, dass:
Angrenzende vertikale Ränder kollabieren ...
Zwei Ränder grenzen genau dann aneinander, wenn:
- Beide gehören zu In-Flow-Boxen auf Blockebene, die am gleichen Blockformatierungskontext teilnehmen
- Keine Linienkästen, kein Abstand, keine Polsterung und kein Rand trennen sie ...
- beide gehören zu vertikal benachbarten Kastenkanten, dh bilden eines der folgenden Paare:
- oberer Rand einer Box und oberer Rand ihres ersten in-flow-Kindes
- ...
Die dritte Div in unserem Beispiel ist sicherlich nicht das erste Kind des Körpers , aber es ist das erste Kind im Fluss . Beachten Sie, dass gemäß https://www.w3.org/TR/CSS22/visuren.html#positioning-scheme :
Ein Element wird als nicht fließend bezeichnet, wenn es schwebend, absolut positioniert oder das Wurzelelement ist. Ein Element wird als In-Flow bezeichnet, wenn es nicht außer Fluss ist.
Da der erste und der zweite Div in unserem Beispiel schwebend sind, fließt nur der dritte Div. Somit grenzt sein oberer Rand an den oberen Rand seines Elternteils an, und die Ränder kollabieren - was den gesamten Körper einschließlich der beiden schwebenden Elemente nach unten drückt . Somit überlappt die dritte Division ihre Geschwister, obwohl sie eine große hat margin-top. Folglich erfüllen wir - in diesem hypothetischen Fall, in dem das dritte Element cleareingestellt ist none- die Bedingung, dass:
Die obere Randkante des Elements befindet sich nicht hinter den entsprechenden Gleitkommazahlen
So:
Die Freigabe wird eingeführt, und die Ränder fallen gemäß den Regeln in 8.3.1 zusammen
Wie viel Freiraum? Die Spezifikation bietet Browsern zwei Optionen mit einigen Erläuterungen:
Dann wird der Freiraum auf den größeren Wert eingestellt von:
- Der Betrag, der erforderlich ist, um die Randkante des Blocks auch mit der unteren Außenkante des niedrigsten zu löschenden Schwimmers zu platzieren.
- Der Betrag, der erforderlich ist, um die obere Randkante des Blocks an ihrer hypothetischen Position zu platzieren.
Alternativ wird der Abstand genau auf den Betrag eingestellt, der erforderlich ist, um die Randkante des Blocks auch mit der unteren Außenkante des untersten Schwimmers zu platzieren, der geräumt werden soll.
Hinweis: Beide Verhaltensweisen sind bis zur Bewertung ihrer Kompatibilität mit vorhandenen Webinhalten zulässig. Eine zukünftige CSS-Spezifikation erfordert entweder die eine oder die andere.
Hinweis: Der Abstand kann negativ oder Null sein.
Bevor wir mit der Anwendung dieser Regeln beginnen können, stoßen wir sofort auf eine Komplikation. Erinnern Sie sich an den zusammenbrechenden Spielraum, den wir im hypothetischen Fall berücksichtigen mussten, wo clearwar none? Nun, in diesem nicht hypothetischen Fall, in dem wir die zu verwendende Freigabe berechnen, existiert sie nicht , weil die Existenz der Freigabe sie hemmt. Erinnern Sie sich an die zuvor zitierten Regeln für kollabierende Ränder aus 8.3.1 , die vorschreiben, dass Ränder nur dann angrenzen, wenn:
- Keine Linienkästen, kein Abstand , keine Polsterung und kein Rand trennen sie
(Betonung hinzugefügt). Somit grenzen der obere Rand des dritten Div und der obere Rand seines Elternteils nicht mehr aneinander. Wir können dieses Szenario vor der Freigabe in unserem Beispiel-Snippet simulieren clear: none, indem wir padding-top: 1pxden Body beibehalten, aber hinzufügen , wodurch auch der Randkollaps gemäß der oben angegebenen Regel deaktiviert wird.
body {
padding-top: 1px;
}
<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: none; margin-top: 200px; background: blue;">Main Data</div>
Jetzt, anders als beim Zusammenbruch der Ränder, liegt unsere dritte Division bequem unter ihren beiden schwebenden Geschwistern. Aber wir haben bereits beschlossen, auf der Grundlage eines hypothetischen Szenario , in dem die Margen haben Zusammenbruch, muss dieser Zwischenraum hinzugefügt werden; Alles was bleibt ist, die Höhe der Freigabe zu wählen , um:
Platzieren Sie die Randkante des Blocks auch mit der unteren Außenkante des untersten Schwimmers, der geräumt werden soll
Wir haben also keine andere Wahl, als einen negativen Abstand zum dritten Div anzuwenden , um dessen obere Randkante nach oben zu ziehen und die untere Außenkante (auch als Randkante bezeichnet ) der darüber schwebenden Elemente zu berühren . Wenn die schwebenden Elemente jeweils 10 Pixel hoch sind und der dritte Teil einen oberen Rand von 200 Pixel hat, wird ein Abstand von -190 Pixel angewendet. Das bringt uns schließlich zum Endergebnis, das der Fragesteller gesehen hat:
<div style="float: left; background: red;">Left</div>
<div style="float: right; background: green;">Right</div>
<div style="clear: both; margin-top: 200px; background: blue;">Main Data</div>
(Beachten Sie, dass Sie, wenn Sie das dritte Div im obigen Snippet mit den Entwicklertools Ihres Browsers untersuchen, immer noch die 200 Pixel des oberen Randes über dem Div sehen können, die weit über den Rest des Inhalts hinausgehen - es ist nur das Die gesamte Randbox wurde durch den großen negativen Abstand nach oben gezogen.)
Einfach!
