Warum hat mein übergeordneter Container die Höhe 0, wenn ich seine untergeordneten Container schweben lasse?

Verwechslung zwischen schwebendem Inhalt und Containerhöhe

In CSS werden schwebende Elemente außerhalb des normalen Dokumentflusses positioniert und haben keinen Einfluss auf die Höhe ihrer Elemente übergeordneter Container. Dieses Verhalten kann kontraintuitiv erscheinen, insbesondere wenn die Seite korrekt gerendert wird.

Verstehen des Problems

Berücksichtigen 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 ein Es wird eine HTML-Struktur wie diese erstellt:

<div>

Die Seite wird korrekt gerendert, aber bei der Überprüfung zeigt der übergeordnete div#wrapper eine Höhe von 0 Pixel an. Dies geschieht, weil schwebende Inhalte wie .content und .lbar aus dem normalen Fluss entfernt werden und Positionen außerhalb jeglicher Blockinhalte einnehmen.

Behebung des Höhenproblems

Um sicherzustellen, dass der übergeordnete Container auf die Höhe seines schwebenden Inhalts erweitert wird, gibt es zwei Haupttechniken:

• Überlauf: Ausgeblendet: Durch das Festlegen von Überlauf: Ausgeblendet auf dem Containerelement wird ein neues erstellt Blockformatierungskontext, der den Container dazu zwingt, die Höhe seines schwebenden untergeordneten Elements zu berücksichtigen.
• Floats enthalten: Es gibt andere Methoden zum Einschließen von Floats, z. B. die Verwendung von Inline-Block-Pseudoelementen und die schwebenden Elemente in einen anderen Container einschließen.

Das Verständnis dieses Aspekts des CSS-Layouts ist entscheidend für die Erstellung von Webseiten mit genauer Größe und Fluss.

Das obige ist der detaillierte Inhalt vonWarum hat mein übergeordneter Container die Höhe 0, wenn ich seine untergeordneten Container schweben lasse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!