Warum kollabiert ein übergeordnetes Div auf die Höhe Null, wenn es schwebende untergeordnete Elemente enthält?

Das Rätsel des Zero-Height Parent: Floating Children und Container Heights

Im Bereich des Webdesigns stoßen wir auf eigenartige Verhaltensweisen in CSS Styling kann verwirrend sein. Ein solches Rätsel entsteht, wenn die Höhe eines übergeordneten Divs auf mysteriöse Weise auf Null schrumpft, obwohl es schwebende untergeordnete Elemente enthält. Um dieses Rätsel zu lösen, werfen wir einen Blick auf den CSS- und HTML-Code:

#wrapper {
  width: 75%;
  min-width: 800px;
}

.content {
  text-align: justify;
  float: right;
  width: 90%;
}

.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

<div>
<p>Wenn diese Stile angewendet werden, wird die Seite korrekt gerendert. Bei der Untersuchung der Elemente fällt jedoch eine eigenartige Beobachtung auf: Das übergeordnete Div, #wrapper, weist eine Höhe von 0 Pixel auf, obwohl schwebende untergeordnete Divs vorhanden sind. Dieses Verhalten wirft die Frage auf: Warum verschwindet die Höhe des übergeordneten Div?</p>
<p>Die Antwort liegt in der inhärenten Natur schwebender Elemente in CSS. Schwebte Inhalte werden im Wesentlichen aus dem normalen Dokumentenfluss entfernt und nehmen einen Platz außerhalb des normalen Layouts ein. Dadurch wird die Höhe des Behälters allein durch seinen nichtschwimmenden Inhalt bestimmt. Da in diesem Fall der gesamte Inhalt innerhalb von #wrapper schwebend ist, sinkt die Höhe des Containers auf Null.</p>
<p>Um dieses Verhalten zu beheben, können verschiedene Techniken eingesetzt werden:</p>
<ul>
<li>
<strong>Überlauf : Ausgeblendet:</strong> Durch die Festlegung von overflow: ausgeblendet auf dem übergeordneten Div wird ein neuer Blockformatierungskontext erstellt. Dies zwingt die schwebenden untergeordneten Elemente effektiv dazu, zur Höhe des Containers beizutragen.</li>
<li>
<strong>Floats enthalten:</strong> Es gibt verschiedene Methoden zum Einschließen von schwebenden Elementen, um sicherzustellen, dass sich die Höhe des übergeordneten Containers entsprechend erweitert. Dazu gehört die Verwendung von Pseudoelementen, CSS3-Flexbox oder Rasterlayouts.</li>
</ul>
<p>Durch das Verständnis des Verhaltens schwebender Elemente und die Implementierung geeigneter Eindämmungstechniken können Entwickler das verwirrende Phänomen der übergeordneten Div-Elemente mit Nullhöhe verhindern und die Kontrolle behalten über ihre Seitenlayouts.</p>
</div>

Das obige ist der detaillierte Inhalt vonWarum kollabiert ein übergeordnetes Div auf die Höhe Null, wenn es schwebende untergeordnete Elemente enthält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!