Warum erstrecken sich schwebende Elemente über die Grenzen ihrer enthaltenden Divs hinaus und wie kann ich das beheben?

Floating-Elemente, die Div-Grenzen überschreiten: Ursachen und Lösungen

Beim Platzieren von Elementen innerhalb eines Divs und beim Festlegen einer bestimmten Breite für das Div kommt es zu unerwartetem Verhalten kann auftreten, wenn schwebende Elemente über die Grenzen des Div hinausgehen. Dies geschieht aufgrund der inhärenten Natur von Float, das das Element aus dem normalen Fluss entfernt.

Grund für das Problem

Wenn ein Element schwebend ist, wird es entfernt aus dem Dokumentenfluss und links oder rechts vom enthaltenden Div positioniert. Daher haben die schwebenden Elemente keinen Einfluss auf die Höhe oder Breite des Container-Div, da sie nicht als Teil seines Inhalts betrachtet werden.

Lösungen zum Strecken schwebender Elemente

Da Es gibt mehrere Möglichkeiten, dieses Problem zu beheben und sicherzustellen, dass schwebende Elemente die Höhe des enthaltenden div erweitern:

1. Setzen Sie die Überlaufeigenschaft auf „versteckt“

Fügen Sie das folgende CSS zum übergeordneten Div hinzu:

#parent {
  overflow: hidden;
}

Durch die Einstellung „overflow: versteckt“ wird das übergeordnete Div erweitert, um seinen Inhalt aufzunehmen. einschließlich der schwebenden Elemente.

2. Schweben Sie das übergeordnete Div

Lassen Sie auch das übergeordnete Div schweben, indem Sie das folgende CSS hinzufügen:

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

Das Schweben des übergeordneten Div ermöglicht es seinen schwebenden untergeordneten Elementen, seine Höhe zu strecken.

3. Verwenden Sie ein Clear-Element

Fügen Sie ein Clear-Element im übergeordneten Div unmittelbar nach den schwebenden Elementen ein:

<div>

CSS-Stile für das Clear-Element:

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

Das Clear-Element zwingt die schwebenden Elemente dazu, am Anfang der nächsten Zeile zu beginnen, sodass sich das übergeordnete Div strecken kann, um sie aufzunehmen.

Das obige ist der detaillierte Inhalt vonWarum erstrecken sich schwebende Elemente über die Grenzen ihrer enthaltenden Divs hinaus und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!