Beispiele für Clearfix und Clear

In diesem Artikel wird hauptsächlich die Verwendung von Clearfix und Clear in HTML für diejenigen erläutert, die gerade erst anfangen, CSS zu verstehen. Auf die Stile Clearfix und Clear werde ich hier nicht näher eingehen.

Lassen Sie uns über die Verwendung dieser beiden Klassen sprechen. Sehen wir uns zunächst ein Beispiel an:

Code kopieren

Der Code lautet wie folgt:

Wir alle wissen, dass die Verwendung von Floats viele unbekannte Probleme verursacht. Aus dem obigen Beispiel können wir erkennen, dass die Höhe von class="demo" nicht durch das darin enthaltene Div gestreckt wird. Dies liegt daran, dass das darin enthaltene Div schwebt und das Dokument verlässt. Da Demo selbst keine Höhe hat, können wir seinen grauen Hintergrund nicht sehen. Natürlich können wir der Demo einfach eine Höhe zuweisen, aber das geht vom Zweck dieses Artikels ab (manchmal möchten wir, dass die Höhe des äußeren Div durch den Inhalt darin bestimmt wird).

Da das Problem durch Floating verursacht wird, müssen Sie nur das Floating löschen. Ich glaube, Experten kennen viele Möglichkeiten zum Löschen von Floating, z. B. overflow:hidden. Als nächstes erkläre ich, wie man Clearfix und Clear zum Löschen von Floats verwendet.

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html lang="en-US">
<Kopf>
<meta charset="UTF-8"/>
<title>So verwenden Sie Clearfix und Clear in HTML</title>
<link rel="stylesheet" type="text/css" href="/css/base.css" media="alle"/>
<style type="text/css">
.fl{float:left;}
.demo{Hintergrund:#ccc;}
.item1{Hintergrund:#f90;Höhe:100px;Breite:100px;}
.item2{Hintergrund:#fc0;Höhe:200px;Breite:100px;}
</Stil>
</Kopf>
<Text>
<h2>Verwenden Sie „Clear“, um Floats zu löschen</h2>
<div Klasse="Demo">
<div Klasse="fl item1"></div>
<div Klasse="fl item2"></div>
<div Klasse="klar"></div>
</div>
<h2>Floats löschen mit Clearfix</h2>
<div Klasse="Clearfix-Demo">
<div Klasse="fl Artikel1"></div>
<div Klasse="fl item2"></div>
</div>
</body>
</html>

Wir haben festgestellt, dass Clearfix hauptsächlich in der übergeordneten Ebene der schwebenden Ebene verwendet wird, während Clear hauptsächlich zwischen schwebenden Ebenen und auf derselben Ebene wie die schwebende Ebene verwendet wird. Wenn Sie die Höhe der übergeordneten Ebene erweitern möchten, sollte Clear zuletzt platziert werden.

Welche der beiden Methoden besser ist, lässt sich schwer sagen. Wir können nur sagen, dass spezifische Bedürfnisse berücksichtigt werden müssen.

Manche Leute fragen sich vielleicht, warum beim Schreiben im Clearfix-Stil wie diesem der Float gelöscht wird? Was bedeuten diese Stile? Dies erfordert von den Studierenden ein gewisses Verständnis von CSS-Pseudoklassen

<<: Beispiel für die Verwendung von CSS3 zum Erstellen eines animierten Pikachu-Hintergrundbilds

>>: Konfigurationsmethode für die SystemC-Umgebung unter Linux

Super detaillierter GCC-Upgrade-Prozess unter Linux

Beispiele für Clearfix und Clear

Super detaillierter GCC-Upgrade-Prozess unter Linux

Implementierung der Remote-Linux-Entwicklung mit vscode

Erkunden Sie die Eigenschaften und Ausdrücke verschiedener Räume in HTML (empfohlen)

So legen Sie den Produktionsumgebungsmodus process.env.NODE_ENV fest

So finden Sie Informationen zu nicht festgeschriebenen Transaktionen in MySQL

Schneller Einstieg in die Teleport-Komponenten und Verwendungssyntax von VUE 3

Detaillierte Erklärung zur Verwendung des Schlüsselworts ESCAPE in MySQL

Vue3 realisiert den Bildlupeneffekt

Detaillierte Erklärung zum Schreiben von MySQL ungleich null und gleich null

So verwenden Sie CSS-Medienabfragen mit einem geringeren Seitenverhältnis

Artikel empfehlen

Tutorial zur Remote-Verbindung mit einer MySQL-Datenbank unter Linux

Beispielcode zur Implementierung der MySQL-Master-Slave-Replikation in Docker

Zusammenfassung der mobilen Anpassungslösung von webpack

MySql-Anmeldekennwort vergessen und Lösung für vergessenes Kennwort

Eine kurze Analyse der Verwendung von USING und HAVING in MySQL

5 Befehle zur Verwendung des Rechners in der Linux-Befehlszeile

Detaillierte Erklärung der MySQL 30-Militärregeln

Eine detaillierte Einführung in die Bereitstellung von Seata Docker mit hoher Verfügbarkeit

Drei Vue-Slots zur Lösung der Kommunikation zwischen übergeordneten und untergeordneten Komponenten

Beispiel für die Implementierung von Gruppierung und Deduplizierung in einer MySQL-Tabellenverknüpfungsabfrage

Detaillierte Erklärung der Vue px-zu-rem-Konfiguration

Installationstutorial auf Unternehmensebene unter Verwendung des LAMP-Quellcodes

Beispiel für die Implementierung einer Ankerpositionierungsfunktion beim WeChat-Applet

Detaillierte Erklärung der privaten Klassenfelder von JavaScript und der privaten Modifizierungen von TypeScript

CSS-Animation kombiniert mit SVG zur Erzeugung eines Energieflusseffekts