Einführung
Bei der Front-End-Entwicklung stoßen wir häufig auf einige Stilprobleme, darunter das durch Pseudoelemente verursachte Layoutproblem. Um dieses Problem zu lösen, können wir die Pseudo-Tag-Reinigungstechnologie verwenden. In diesem Blog werden die Konzepte, die Verwendung und Beispielcodes der Einzel-Pseudo-Tag-Reinigung und der Doppel-Pseudo-Tag-Reinigung vorgestellt und deren Prinzipien im Detail erläutert.
1. Einzelnes Pseudo-Label-Entfernen
Das Löschen einzelner Pseudo-Tags ist eine Technik zum Löschen von Floats durch Anwenden von Pseudoelementen auf HTML-Elemente. Wenn ein Element schwebend ist, unterbricht es den normalen Dokumentfluss, was möglicherweise dazu führt, dass die Höhe des übergeordneten Elements zusammenbricht. Durch das Hinzufügen eines Pseudoelements zum übergeordneten Element können wir erzwingen, dass das übergeordnete Element schwebende Elemente enthält, und das normale Layout wiederherstellen.
1.1 Nutzung
Fügen Sie den folgenden Code zum Stil des übergeordneten Elements hinzu:
.clearfix::after {
content: "";
display: table;
clear: both;
}
Im obigen Code definieren wir ein Pseudoelement ::afterund setzen es contentauf eine leere Zeichenfolge. Wir können dem Pseudoelement tabellenartige Eigenschaften verleihen, indem wir displaydas Attribut auf setzen und den Float über das Attribut löschen.tableclear
1.2 Beispielcode
<div class="parent clearfix">
<div class="float-left"></div>
<div class="float-left"></div>
</div>
.clearfix::after {
content: "";
display: table;
clear: both;
}
.float-left {
float: left;
width: 50%;
height: 100px;
background-color: #f1f1f1;
}
Im obigen Beispielcode haben wir .clearfixdie Klasse auf den Stil des übergeordneten Elements angewendet und ein übergeordnetes Element definiert, das zwei schwebende untergeordnete Elemente enthält. Durch die Verwendung der Einzel-Pseudo-Tag-Löschtechnik enthält das übergeordnete Element das schwebende Element korrekt und vermeidet Probleme mit der Höhenreduzierung.
2. Doppelte Pseudo-Label-Entfernung
Das Löschen doppelter Pseudo-Tags ist eine Technik, die Floats löscht, indem Pseudoelemente sowohl auf übergeordnete als auch auf untergeordnete Elemente angewendet werden. Im Vergleich zur Einzel-Pseudo-Tag-Reinigung kann die Dual-Pseudo-Tag-Reinigung in einigen Randfällen Layoutprobleme besser lösen.
2.1 Nutzung
Fügen Sie den folgenden Code in den Stilen der übergeordneten und untergeordneten Elemente hinzu:
.clearfix::after,
.clearfix::before {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
2.2 Beispielcode
<div class="parent clearfix">
<div class="float-left"></div>
<div class="float-left"></div>
</div>
.clearfix::after,
.clearfix::before {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.float-left {
float: left;
width: 50%;
height: 100px;
background-color: #f1f1f1;
}
Im obigen Beispielcode haben wir .clearfixdie Klasse in den Stilen des übergeordneten Elements und der untergeordneten Elemente angewendet und ein übergeordnetes Element definiert, das zwei schwebende untergeordnete Elemente enthält. Durch die Verwendung der Doppel-Pseudo-Tag-Löschtechnik können wir sicherstellen, dass das übergeordnete Element das schwebende Element korrekt enthält, und Layoutprobleme beheben.
abschließend
Das Löschen einzelner Pseudo-Tags und das Löschen doppelter Pseudo-Tags sind häufig verwendete Techniken in der Front-End-Entwicklung, um Layoutprobleme zu lösen, die durch schwebende Elemente verursacht werden. Durch Anwenden eines Pseudoelements auf ein übergeordnetes Element oder ein übergeordnetes-untergeordnetes Element können wir den Float löschen und das normale Layout wiederherstellen. Unabhängig davon, ob es sich um die Entfernung einzelner Pseudoetiketten oder die Entfernung doppelter Pseudoetiketten handelt, können Sie diese je nach Situation verwenden. In der tatsächlichen Entwicklung können wir diese Technologien je nach Bedarf flexibel einsetzen, um die Korrektheit des Seitenlayouts sicherzustellen.
Ich hoffe, dass dieser Blog Ihnen hilft, die Technologie zum Entfernen einzelner Pseudo-Tags und doppelter Pseudo-Tags zu verstehen und anzuwenden!
Referenzlinks: