Warum ändert „float: left' nicht die Breite eines Div?

Warum CSS Float die Div-Breite nicht ändern kann

Problembeschreibung

In CSS wird erwartet, dass die Eigenschaft „float: left“ nachfolgende Elemente stattdessen nach links verschiebt eine neue Linie zu erstellen. In einem Szenario wie dem gegebenen Beispiel erstreckt sich das zweite Div jedoch weiterhin über die gesamte Breite und widerspricht den Erwartungen. Der Inhalt hingegen wird korrekt ausgerichtet.

Erklärung des Verhaltens

Dieses Verhalten ist bei der Float-Positionierung inhärent. Wenn ein Element schwebend ist (in diesem Fall das .inline-Div), fließt der Inhalt um seine rechte Seite herum. Zeilenboxen werden gekürzt, um die Randbox des Floats unterzubringen, aber die Breite des enthaltenden Blocks (festgelegt durch das .gelbe Div) bleibt reserviert. Dies ist in der CSS-Spezifikation angegeben.

Lösung

Um zu verhindern, dass das .gelbe Div das schwebende Element überlappt, kann man eine Überlaufeigenschaft mit einem anderen Wert als „visible“ hinzufügen. Dadurch wird der Browser gezwungen, einen neuen Blockformatierungskontext zu erstellen, wodurch Überlappungen verhindert werden.

Das obige ist der detaillierte Inhalt vonWarum ändert „float: left' nicht die Breite eines Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!