CSS Clear Float Clear:Both Beispielcode
|
Heute werde ich mit Ihnen über das Löschen von Floats sprechen. Bevor ich über das Löschen von Floats spreche, müssen Sie verstehen, was Floats sind. Ich werde Ihnen hier keine detaillierte Einführung in Floats geben.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
.Kasten{
Breite: 1000px;
Rand: 0 automatisch;
Rand: 8px tief schwarz;
}
.box::nach{
Inhalt: "";
klar: beides;
Anzeige: Block;
}
.box .links{
Breite: 50%;
Höhe: 300px;
Hintergrundfarbe: rot;
schweben: links;
}
.box .rechts{
Breite: 50%;
Höhe: 300px;
Hintergrundfarbe: blau;
schweben: rechts;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<div Klasse="links"></div>
<div Klasse="rechts"></div>
</div>
</body>
</html>
Hier können wir sehen, dass bei Verwendung der schwebenden Funktion die Breite und Höhe des übergeordneten Elements nicht durch das untergeordnete Element gestreckt werden kann und das Layout daher anders ausfällt als Sie es sich vorgestellt haben. Hier gibt es viele Lösungen. Der Erste: Fügen Sie dem übergeordneten Element ein Div hinzu und löschen Sie den Float für das hinzugefügte Div.
<div Klasse="klar"></div>
klar{
klar: beides;
}Zweiter Typ: Wir können die Höhe des übergeordneten Div festlegen, was ebenfalls möglich ist.
.Kasten{
Breite: 1000px;
Höhe: 300px;
Rand: 0 automatisch;
Rand: 8px tief schwarz;
}Der dritte Wir können dem übergeordneten Element das Attribut overflow:hidden; hinzufügen. Das funktioniert auch.
.Kasten{
Überlauf: versteckt;
Breite: 1000px;
Rand: 0 automatisch;
Rand: 8px tief schwarz;
}Der vierte Wir können die Position „absolute“ oder „display: inline-block“ verwenden, um das Schweben zu löschen.
.Kasten{
/* Position: absolut; */
Anzeige: Inline-Block;
Breite: 1000px;
Rand: 0 automatisch;
Rand: 8px tief schwarz;
}Eigentlich reicht es aus, die anderen vier Typen zu kennen, aber Sie müssen wissen, wie man den fünften Typ verwendet. Die anderen vier Typen können schwebende Elemente löschen, aber sie verursachen unnötige Probleme. Nehmen wir den zweiten Typ als Beispiel. Wenn das übergeordnete Element später untergeordnete Elemente hinzufügen muss, müssen wir auch die Höhe des übergeordneten Elements ändern, was eine Menge Probleme verursacht. Der fünfte Typ ist auch der praktischste. Der fünfte Verwenden Sie Pseudoelemente, um Floats zu löschen. Wir können dem übergeordneten Element Pseudoelemente hinzufügen.
.box::nach{
Inhalt: "";
klar: beides;
Anzeige: Block;
}Dies ist das Ende dieses Artikels über den Beispielcode von CSS clear float clear:both. Weitere verwandte CSS clear both-Löschinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder weiter unten in den verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: JS verwendet Clip-Pfad, um eine dynamische Bereichs-Clipping-Funktion zu implementieren
>>: Installation und Konfiguration des automatischen Mount-Dienstes AutoFs im Linux-System
Artikel empfehlen
Zwei Möglichkeiten, dem Hintergrundbild mithilfe der Hintergrundfarbe über CSS einen Maskeneffekt hinzuzufügen
Wenn ein Div gleichzeitig Hintergrundfarbe und Hi...
Centos7.3 So installieren und implementieren Sie Nginx und konfigurieren https
Installationsumgebung 1. gcc-Installation Um ngin...
So konfigurieren Sie den NAT-Modus für virtuelle VMware-Maschinen
In diesem Artikel wird der NAT-Konfigurationsproz...
Eine kurze Einführung in Web2.0-Produkte und -Funktionen
<br />Was ist Web 2.0? Web2.0 umfasst diese ...
JavaScript-Grundlagenoperatoren
Inhaltsverzeichnis 1. Betreiber Zusammenfassen 1....
Detaillierte Erklärung der Socket (TCP)-Bindung aus dem Linux-Quellcode
Inhaltsverzeichnis 1. Ein einfachstes serverseiti...
Detaillierte Erklärung der Funktionsklassifizierung und Beispiele für diese Zeigerfunktion in Javascript
Drei Möglichkeiten zum Definieren von Funktionen ...
Automatisches Erstellen und Bereitstellen mit Docker+Jenkins
Dieser Artikel stellt die automatische Build-Bere...
JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts
JavaScript-Umschalteffekt für Bekleidungsalben (ä...
Lernen Sie, wie Sie mit charAt() in JavaScript die am häufigsten vorkommenden Zeichen und deren Anzahl zählen.
Zuvor habe ich die Verwendung der charAt()-Method...
Wie implementiert MySQL ACID-Transaktionen?
Vorwort Kürzlich wurde ich in einem Interview gef...
Eine kurze Diskussion zur Front-End-Produktion: Ist IE6 aus Kompatibilitätsgründen noch erforderlich?
Auf dem heimischen Markt besteht noch immer ein g...
Lösung für das Problem, dass es beim Klicken auf „Alles auswählen“ in der Shuttle-Box von Element bei großen Datenmengen hängen bleibt
Inhaltsverzeichnis Lösung 1: Kopieren Sie die Übe...
MySQL-Interviewfragen: So richten Sie Hash-Indizes ein
Zusätzlich zu den B-Tree-Indizes bietet MySQL auc...
DOCTYPE Dokumenttypdeklaration (unbedingt lesenswert für Webseiten-Liebhaber)
DOCTYPE-DEKLARATION: Oben auf jeder Seite, die Sie...