Abschnitt 8.3.1 der CSS 2.1-Spezifikation zu kollabierenden Margen heißt:
Wenn die oberen und unteren Ränder eines Elements mit Abstand sind angrenzend, kollabieren seine Ränder mit den angrenzenden Rändern von folgende Geschwister, aber die resultierende Marge kollabiert nicht mit der untere Rand des Elternblocks.
Hier ist mein sicherlich unberechenbarer Versuch, etwas aus dieser Aussage zu machen:
Die Anweisung berücksichtigt ein Element X, für das gilt:
X hat Clearance, also entweder "clear: left;", "clear: right;" oder "klar: beide;" Eigenschaften wurden darauf angewendet.
Da die oberen und unteren Ränder von X nebeneinander liegen, Im Falle eines normalen Flusses betrachten wir das Szenario, in dem:
Dann sagt die Spezifikation, "seine Ränder kollabieren mit den angrenzenden Rändern von folgenden Geschwistern ", aber es kann höchstens einen folgenden Geschwister geben, wie oben ausgeführt, so muss dies im Wesentlichen bedeuten, dass wenn es eine gibt Geschwister folgt dann der Rand kollabiert.
"aber dieser resultierende Rand fällt nicht mit dem unteren Rand zusammen des Elternblocks. "- Ich verstehe das nicht: wenn der untere Rand ist neben dem oberen Rand eines Geschwisters, dann kann es nicht benachbart sein der untere Rand des Elternblocks, es sei denn, die Geschwisterhöhe ist Null.
Ich bin völlig verwirrt. Kann jemand bitte diese Aussage besser erklären Weg, vielleicht mit ein paar illustrativen Beispielen? Danke.
Zuerst ein paar Klarstellungen:
Ein Element mit Clearance hat clear auf etwas anderes als none gesetzt und löscht tatsächlich einen Float.
Ein Element, dessen oberer und unterer Rand sich neben befindet, bedeutet, dass es sich nicht um Geschwister handelt. Es handelt sich um ein 0-height-Element ohne Rahmen oder Polsterung, sodass sich der obere Rand und der untere Rand des Elements berühren. Wenn dies geschieht, kollabieren sie zusammen, eine Situation, die als bekannt ist, die durch kollabiert.
Sehen wir uns nun ein Beispiel an:
Spielen Sie mit ihm hier: Ссылка
Da ein Rand am Körper ist, können Sie den 20px Rand um den blauen #container sehen. Das rote #floated ist auch ein offensichtlicher 20px um 20px.
Dann, da es 0 Höhe ohne Polsterung und ohne Rand ist, kollabieren der obere und der untere Rand des #korrigierten Bildes miteinander. Sie sind auch mit dem oberen Rand des #Following verbunden. Die Größe dieses zusammengebrochenen Rands ist 30px, der größte der drei.
Da das # following 0 height ist und kein Padding und kein Rahmen hat, grenzt unser 30px-Rand an den unteren Rand des #containers und würde damit kollabieren. Außer jetzt tritt die von Ihnen angegebene Regel ein und das nicht.
Da es nicht mit dem unteren Rand des Containers kollabiert, muss es irgendwo in ihm platziert werden. Woher? Es beginnt bei 10px über der unteren Kante von #floater und erstreckt sich 20px darunter. Warum? Der obere Rand von #cleared ist der oberste Rand, der an diesem Kollapsrand teilnimmt, also fangen wir an, wo er beginnen würde. Da es 10px ist, beginnt unser minimierter Rand 10px über der unteren Kante von #floater, dem Element unmittelbar davor.
Ja, das ist wahnsinnig, und die meisten Szenarien, bei denen es zusammenbricht, sind verrückt. Es war eine schreckliche Idee, durch zu kollabieren, und sie hätte es niemals in CSS schaffen sollen, aber es dauerte, bevor die Leute es besser wussten, und jetzt müssen wir damit umgehen und all die verrückten Konsequenzen.
>