Warum hat ein schwebendes Element keinen Einfluss auf die Breite des nachfolgenden Div?

Warum ändert CSS Float nicht die Breite des nachfolgenden Div?

Bei Verwendung der Eigenschaft float:left für ein Element wird dies erwartet dass sich das nachfolgende Element rechts vom schwebenden Element positionieren würde, nicht darunter. In manchen Fällen kann es jedoch sein, dass sich das nachfolgende Element weiterhin über die gesamte Breite erstreckt.

Dies liegt am grundlegenden Verhalten von schwebenden Elementen in CSS. Wenn ein Element schwebend ist, wird es aus dem normalen Fluss des Dokuments entfernt und ähnelt effektiv einem Bild. Der Inhalt, der auf das schwebende Element folgt, fließt um dieses herum und erzeugt einen Zeilenumbruch.

Die Breite des enthaltenden Blocks, der den für nachfolgende Elemente verfügbaren horizontalen Platz bestimmt, wird jedoch durch das schwebende Element nicht beeinflusst. Das Randfeld des schwebenden Elements (einschließlich etwaiger Inhalte) ist im enthaltenden Block reserviert, daher müssen nachfolgende Elemente weiterhin an seinem rechten Rand ausgerichtet sein.

Ein vom W3C bereitgestelltes Beispiel veranschaulicht dieses Verhalten:

[Bild eines schwebenden Elements, das ein folgendes Element in einem Absatz überlappt]

Wie im Bild gezeigt, nimmt das schwebende Element Platz im enthaltenden Block ein und der nachfolgende Inhalt umschließt es. Die Zeilenfelder rechts vom Gleitkomma werden gekürzt, um es unterzubringen.

Lösung: Erstellen eines neuen Blockformatierungskontexts

Um zu verhindern, dass das nachfolgende Element das Gleitkomma überlappt Element bietet CSS eine Lösung durch die Verwendung der Overflow-Eigenschaft. Wenn Sie die Überlaufeigenschaft auf etwas anderes als „sichtbar“ setzen (z. B. „versteckt“ oder „scrollen“), wird ein neuer Blockformatierungskontext für das Element erstellt.

Innerhalb dieses neuen Blockformatierungskontexts befindet sich das Randfeld des schwebenden Elements ist eingeschränkt, sodass es keine anderen Floats im selben Kontext überlappen kann. Dadurch kann sich das nachfolgende Element nun rechts vom schwebenden Element ausrichten:

[Beispiel mit Überlauf: versteckt angewendet]

.gelb {

overflow: hidden;

}

Dieses Verhalten wird besonders relevant, wenn es um Elemente geht, bei denen der Inhalt, der um das schwebende Element herum fließt, lang genug ist, um nach dem Float normal fortzufahren. Eine standardmäßige Beschränkung der Überlappung würde verhindern, dass der Inhalt unterhalb des schwebenden Elements fortgesetzt wird.

Das obige ist der detaillierte Inhalt vonWarum hat ein schwebendes Element keinen Einfluss auf die Breite des nachfolgenden Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!