Warum hat ein übergeordnetes Div bei schwebenden untergeordneten Elementen die Körpergröße Null?

Verstehen der Höhe eines übergeordneten Div mit schwebenden untergeordneten Elementen

Im Kontext von Webdesign kann die Höhe eines Div-Containers beeinflusst werden durch seine untergeordneten Elemente. Wenn diese untergeordneten Elemente jedoch schwebend sind, kann ein unerwartetes Verhalten auftreten, das zu einem übergeordneten Div mit der Höhe Null führt.

Um dies zu veranschaulichen, betrachten 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 Erstellen Sie HTML mit diesem CSS, zum Beispiel:

<div>

Möglicherweise stellen Sie fest, dass die Seite korrekt gerendert wird, aber wenn Sie das DOM überprüfen, scheint das „#wrapper“-Div eine Höhe von 0 Pixel zu haben. Dies liegt daran, dass schwebender Inhalt sich selbst aus dem normalen Fluss des Dokuments entfernt und im Wesentlichen aus dem Dokumentbaum entfernt wird.

Dies hat zur Folge, dass die Höhe des übergeordneten Divs nicht von seinen schwebenden untergeordneten Elementen beeinflusst wird. Infolgedessen bleibt das übergeordnete Div auf seiner Standardhöhe von 0 Pixel.

Um dieses Problem zu beheben und sicherzustellen, dass das übergeordnete Div so erweitert wird, dass es seinen schwebenden Inhalt umfasst, können Sie die Eigenschaft „overflow: versteckt“ für das übergeordnete Div verwenden div. Dadurch wird ein neuer „Blockformatierungskontext“ erstellt, der die schwebenden untergeordneten Elemente dazu zwingt, innerhalb der Grenzen des übergeordneten Elements zu bleiben.

Hier ist das aktualisierte CSS:

#wrapper {
  width: 75%;
  min-width: 800px;
  overflow: hidden; /* Added */
}

Mit dieser Änderung wird der „#wrapper " div wird nun gestreckt, um es an seine schwebenden untergeordneten Elemente anzupassen, sodass sich das Layout der Seite wie erwartet verhält.

Das obige ist der detaillierte Inhalt vonWarum hat ein übergeordnetes Div bei schwebenden untergeordneten Elementen die Körpergröße Null?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!