Wie verhindert man, dass Overflow:hidden schwebende untergeordnete Elemente in CSS ausblendet?

Bewahrung der untergeordneten Sichtbarkeit in Overflow: Hidden Containers

In CSS verbirgt die overflow:hidden-Eigenschaft überlaufende Inhalte innerhalb eines Containers. Bei der Anwendung auf Eltern von schwebenden Kindern tritt jedoch ein faszinierender Effekt auf. Der Container richtet sich automatisch neben seinen schwebenden Geschwistern aus und erstellt ein Layout, in dem das übergeordnete Element eines schwebenden Elements neben ihm erscheint.

Problemstellung:

Die Herausforderung liegt in der Wartung dieses Layout, ohne die Kinder zu verbergen. Indem der Containerüberlauf sichtbar gemacht wird, ignoriert der Container den Fluss der schwebenden Elemente, die über ihnen erscheinen.

Lösung:

Um dies zu verhindern, verwenden Sie die Funktion „ „clearfix“-Technik. Durch das Anhängen der „clearfix“-Klasse an die übergeordnete Klasse und das Entfernen von overflow:hiden behalten die folgenden CSS-Regeln das gewünschte Layout bei:

<code class="css">.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* IE < 8 */
}</code>

Dieser Ansatz „löscht“ schwebende Elemente effektiv und behält gleichzeitig ihr Layout bei, sodass das übergeordnete Element nicht mehr benötigt wird Container, um sich neben ihnen auszurichten, ohne seine untergeordneten Elemente zu maskieren.

Das obige ist der detaillierte Inhalt vonWie verhindert man, dass Overflow:hidden schwebende untergeordnete Elemente in CSS ausblendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!