Wie kann verhindert werden, dass der CSS-Hintergrund den Inhalt bei der Verwendung schwebender Elemente verbirgt?

CSS-Hintergrundfarbe mit schwebenden Elementen

Beachten Sie den folgenden HTML-Code:

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

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

Und das entsprechende CSS:

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

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

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

Beim Hinzufügen von Inhalten zu .right kann sich das übergeordnete .content-Div nicht an die Größe seines untergeordneten Elements anpassen, was zu einem unsichtbaren Rot führt Hintergrund, der den erweiterten Bereich abdeckt.

Verstehen des Problems

Floating-Elemente, wie in diesem Fall .left und .right, werden aus dem normalen Fluss des Dokuments entfernt. Dies wirkt sich auf das übergeordnete Element aus, da es keine definierte Höhe mehr hat, da die untergeordneten Elemente keinen physischen Raum beanspruchen. Folglich kollabiert das übergeordnete Element in sich selbst.

Lösung: Boxabmessungen beibehalten

Um dieses Problem zu beheben, muss das übergeordnete Element gezwungen werden, seine Abmessungen trotz der schwebenden untergeordneten Elemente beizubehalten. Dies kann durch Hinzufügen von overflow:hiden zu .content erreicht werden.

.content {
    overflow: hidden;
}

Alternativ kann overflow:auto verwendet werden, das eine ähnliche Funktionalität bietet und Ihnen gleichzeitig ermöglicht, etwaige Höhenunterschiede zu erkennen.

Dies Durch die Änderung wird sichergestellt, dass .content seine schwebenden untergeordneten Elemente einkapselt, wodurch das Problem des abgeschnittenen roten Hintergrunds behoben wird.

Alternative: Clearfix

Für Browser mit eingeschränkter Unterstützung kann die Verwendung eines Clearfix-Hacks dieses Problem beheben. Dieser Ansatz wird jedoch aus Gründen der Kompatibilität mit modernen Browsern nicht empfohlen.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass der CSS-Hintergrund den Inhalt bei der Verwendung schwebender Elemente verbirgt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!