Warum hat ein Container mit schwebenden Kindern eine Nullhöhe?

Containerhöhe mit schwebenden untergeordneten Elementen verstehen

Bei der Arbeit mit CSS kann es vorkommen, dass ein übergeordneter Container mit schwebenden untergeordneten Elementen endet eine Höhe von Null. Dieses Verhalten kann verwirrend sein, da die Kinder Platz im Container einnehmen.

Das Problem

Beachten Sie das folgende CSS:

#wrapper {
  width: 75%;
  min-width: 800px;
}
.content {
  text-align: justify;
  float: right;
  width: 90%;
}
.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

Wenn Sie dieses CSS mit dem folgenden HTML verwenden:

<div>

Die Seite wird korrekt gerendert. Wenn Sie sich jedoch die Elemente ansehen, werden Sie feststellen, dass der div#wrapper als 0px hoch angezeigt wird.

Warum das passiert

Floating-Inhalte tun dies nicht Einfluss auf die Höhe seines Behälters haben. In diesem Fall sind sowohl das .content- als auch das .lbar-Element schwebend, sodass sie aus dem normalen Fluss des Dokuments entfernt werden. Daher enthält der Container keinen Inhalt, der nicht schwebend ist. Dadurch kann die Höhe des Behälters auf Null sinken, als wäre er leer.

Lösungen

Um dieses Problem zu beheben, können Sie die folgenden Methoden verwenden:

• overflow: versteckt: Wenn Sie diese Eigenschaft für den Container festlegen, wird verhindert, dass der Inhalt außerhalb seiner Grenzen überläuft. Dadurch wird ein neuer Blockformatierungskontext erstellt, der den Container dazu zwingt, sich zu erweitern, um seine schwebenden untergeordneten Elemente aufzunehmen.
• Floats enthalten: Andere Techniken zum Einschließen von Floats umfassen die Verwendung der Clear-Eigenschaft oder das Hinzufügen eines leeren Div mit klar: beide; am Ende des Containers.

Das Verständnis dieses Verhaltens von Floats ist für die Erstellung von Layouts mit CSS unerlässlich. Durch den Einsatz geeigneter Techniken können Sie sicherstellen, dass Ihre Container die gewünschte Höhe haben und Ihre Seitenelemente richtig positioniert sind.

Das obige ist der detaillierte Inhalt vonWarum hat ein Container mit schwebenden Kindern eine Nullhöhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!