Warum zeigt mein übergeordneter Container nicht seine Hintergrundfarbe an, wenn ich schwebende Elemente in CSS verwende?

Hintergrundfarbe und schwebende Elemente in CSS

Bei der Arbeit mit CSS kann es vorkommen, dass schwebende Elemente die Anzeige des übergeordneten Containers verhindern seine Hintergrundfarbe. Dieses Problem entsteht, weil schwebende Elemente aus dem Fluss des Dokuments entfernt werden, wodurch das übergeordnete Element seine definierten Abmessungen verliert.

Betrachten Sie als Beispiel die folgende HTML-Struktur:

<div class="content">
    <div class="left">
        <p>some content</p>
    </div>
    <div class="right">
        <p>some content</p>
    </div>
</div>

Mit Folgendem Styling:

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
 }

.left {
     float: left;
     height: 300px;
     background: green;
 }

.right {
     float: right;
     background: yellow;
 }

In diesem Szenario führt das Hinzufügen von Inhalt zum „rechten“ schwebenden Element nicht dazu, dass das übergeordnete Div vertikal erweitert wird und das Rot sichtbar wird Hintergrund.

Um dieses Problem zu beheben, können Sie die Overflow-Eigenschaft für das übergeordnete Element verwenden. Wenn Sie den Überlauf auf „Ausgeblendet“ oder „Automatisch“ setzen, wird das übergeordnete Element dazu gezwungen, seine untergeordneten Elemente einzuschließen, sodass die Hintergrundfarbe korrekt angezeigt werden kann.

Hier ist ein Beispiel für die Verwendung von Überlauf: Ausgeblendet:

.content {
    overflow:hidden;
}

Durch Erzwingen des Wenn das übergeordnete Element seine untergeordneten Elemente enthält, ist der rote Hintergrund jetzt sichtbar, auch wenn die schwebenden Elemente vorhanden sind.

Das obige ist der detaillierte Inhalt vonWarum zeigt mein übergeordneter Container nicht seine Hintergrundfarbe an, wenn ich schwebende Elemente in CSS verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!