Element Float beeinflusst die Hintergrundfarbabdeckung
In HTML können schwebende Elemente die Hintergrundfarbabdeckung des übergeordneten Containers stören. Wenn ein Containerelement untergeordnete Elemente mit Float-Eigenschaften hat, werden die untergeordneten Elemente aus dem normalen Dokumentenfluss entfernt. Dies kann dazu führen, dass das übergeordnete Element in sich zusammenfällt und seine Hintergrundfarbe verdeckt wird.
Um dieses Problem im Szenario zu beheben vorausgesetzt:
<br><div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
Mit dem folgenden CSS:
<br>.content {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 960px;
height: auto;
margin: 0 auto;
background: red;
clear: both;}
.links {
float: left; height: 300px; background: green;
}
.rechts {
float: right; background: yellow;
}
Das gewünschte Ergebnis besteht darin, dass die rote Hintergrundfarbe die gesamte Höhe des abdeckt „.content“ div. Wenn das „.right“-Div jedoch mit Inhalt gefüllt ist, kann es die Höhe seines übergeordneten Containers nicht erweitern, was dazu führt, dass der rote Hintergrund unvollständig ist.
Die Lösung liegt in der Anwendung der Eigenschaft „overflow: versteckt“ auf das „.content“-Element:
<br>.content {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">overflow: hidden;}
Durch die Einstellung „overflow: versteckt“ wird das „.content“-Div gezwungen, seine schwebenden untergeordneten Elemente zu enthalten, wodurch dies verhindert wird vor dem Zusammenbruch. Infolgedessen umfasst der rote Hintergrund nun wie beabsichtigt die gesamte Höhe des „.content“-Divs.
Das obige ist der detaillierte Inhalt vonWarum verhindert ein schwebendes Element, dass der Hintergrund eines übergeordneten Containers vollständig angezeigt wird, und wie kann dies behoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
