Warum überlaufen schwebende Elemente ihr enthaltendes Div und wie kann ich das beheben?

Floated Elements Escape Containment: Fehlerbehebung bei Div-Überläufen

Beim Arbeiten mit Floats innerhalb eines Divs kann es zu einem Problem kommen, bei dem sich Floating-Elemente darüber hinaus erstrecken die Grenzen ihrer enthaltenden div. Diese Ungleichheit in den Abmessungen kann Ihr beabsichtigtes Layout stören.

Ursache:

Floats werden aus dem normalen Dokumentfluss entfernt, wodurch eine Lücke im übergeordneten Element entsteht. Anschließend werden nicht schwebende Inhalte angepasst, um diesen frei gewordenen Raum zu füllen, was zu einem kleineren Div führt, das die schwebenden Elemente nicht umfasst.

Lösung 1: Überlaufkontrolle

• Überlauf hinzufügen: versteckt zum übergeordneten Div:

#parent { overflow: hidden }

Dies verhindert den Überlauf von schwebenden Elementen und stellt sicher, dass sie innerhalb der Grenzen der Div bleiben. Es kann jedoch sein, dass Inhalte abgeschnitten werden, die über die Höhe des Div hinausgehen.

Lösung 2: Das übergeordnete Div schweben lassen

• Das übergeordnete Div schweben lassen:

#parent { float: left; width: 100% }

Dadurch kann das übergeordnete Div vertikal gestreckt werden, um den schwebenden Inhalt aufzunehmen. Stellen Sie sicher, dass die Breite des Div auf einen festen Wert oder Prozentsatz eingestellt ist, um eine unendliche Ausdehnung zu vermeiden.

Lösung 3: Element löschen

• Verwenden Sie ein klares Element unter dem schwebender Inhalt:

<div class="parent">
  <img class="floated_child" src="..." />
  <span class="clear"></span>
</div>

span.clear { clear: left; display: block; }

Das klare Element fungiert als Wächter und erzwingt den folgenden Inhalt um in einer neuen Zeile unterhalb des schwebenden Inhalts zu beginnen und die korrekten Abmessungen des Div wiederherzustellen.

Das obige ist der detaillierte Inhalt vonWarum überlaufen schwebende Elemente ihr enthaltendes Div und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!