Warum ändert mein schwebendes Div die Größe des nachfolgenden Div nicht?

Das Geheimnis, dass Float die Größe von Div nicht ändert

Bei der Verwendung von CSS-Float wird davon ausgegangen, dass nachfolgende Elemente linksbündig ausgerichtet werden, anstatt in ein neues zu fließen Linie. In manchen Szenarios, wie zum Beispiel im bereitgestellten Beispiel, erstreckt sich das folgende Div jedoch weiterhin über die gesamte Breite, anstatt rechts vom ersten Div zu beginnen.

Um dieses Verhalten zu verstehen, befassen wir uns mit den Feinheiten von Float Positionierung. Wenn ein Element schwebend ist (in diesem Fall das .inline-Div), wird der Inhalt darunter an der rechten Seite dieses Elements ausgerichtet. Die Breite des enthaltenden Blocks, der durch das nachfolgende Element (das .gelbe Div) festgelegt wird, bleibt jedoch weiterhin erhalten.

Dieses Verhalten ist in der CSS-Spezifikation beschrieben: Blockboxen, die nicht positioniert sind, fließen vertikal, als ob der Float dies nicht tun würde existieren. Allerdings werden die Zeilenfelder neben dem Float gekürzt, um das Randfeld des Float aufzunehmen.

Wenn daher ein Element auf Blockebene (wie .gelbes div) einen Hintergrund hat, erstreckt sich dieser durch das Float-Element.

Die Auflösung

Gemäß CSS Level 2.1 dürfen Elemente mit bestimmten Eigenschaften (Ersetzungen auf Blockebene, Elemente, die einen neuen Blockformatierungskontext festlegen) das Randfeld von nicht überlappen alle Floats im gleichen Kontext. Das Hinzufügen einer anderen „Überlauf“-Eigenschaft als „sichtbar“ zum .gelben Div verhindert, dass es das schwebende Element überlappt.

Wann Überlappungen nützlich sein können

Das ist wichtig Beachten Sie, dass Überlappungen in Situationen von Vorteil sein können, in denen der Inhalt nach dem schwebenden Element lang genug ist, um normal fortzufahren. Das standardmäßige Einschränken des Inhalts könnte dazu führen, dass er nicht unter das schwebende Element fließt.

Das obige ist der detaillierte Inhalt vonWarum ändert mein schwebendes Div die Größe des nachfolgenden Div nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!