Beispiele für Clearfix und Clear

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:

<!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>
<div Klasse="Demo">
<div Klasse="fl item1"></div>
<div Klasse="fl item2"></div>
</div>
</body>
</html>

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

Artikel empfehlen

Detaillierte Erklärung zur Verwendung des CSS-Zeigerereignisse-Attributs

Bei der Frontend-Entwicklung stehen wir in direkt...

Detaillierte Analyse der Übereinstimmungsregeln bei der Verarbeitung von Anfragen durch Nginx

Wenn nginx eine Anfrage empfängt, gleicht es zunä...

Beispiel für die Implementierung einer eingebetteten Tabelle mit vue+elementUI

Während meines Praktikums im letzten Studienjahr ...

Responsives CSS-Webseitenlayout zur automatischen Anpassung an PC-/Pad-/Telefongeräte

Vorwort Heutzutage gibt es viele Geräte, darunter...

Öffentlicher Upload-Bereich für mehrere Typen von Anhangsbildern auf der Vue-Seite und anwendbares Faltfenster (Beispielcode)

In Front-End-Projekten ist das Hochladen von Anhä...

Zusammenfassung der Unterschiede zwischen SQL und NoSQL

Hauptunterschiede: 1. Typ SQL-Datenbanken werden ...

Sie müssen wirklich die Verwendung von CSS-Variablen var() verstehen

Wenn ein Webprojekt immer größer wird, werden sei...

So finden Sie die my.ini-Konfigurationsdatei in MySQL 5.6 unter Windows

Machen Sie sich eine Notiz, damit Sie später dara...

Grundlegendes Verständnis und Verwendung der HTML-Auswahloption

Detaillierte Erklärung von HTML (Option auswählen)...

Erste Schritte mit benutzerdefinierten Anweisungen in Vue 3.0

Inhaltsverzeichnis 1. Benutzerdefinierte Anweisun...

Detaillierte Schritte zur Installation der Node.js-Umgebung und Pfadkonfiguration unter Linux

Es gibt zwei Möglichkeiten, nodejs unter Linux zu...

Detaillierte Erklärung zur Verwendung neuer Methoden von HTML5 zur Manipulation von Elementklassennamen in JavaScript

Inhaltsverzeichnis 1. classList-Attribut 2. Prakt...

jQuery-Plugin zum Erzielen eines Code-Rain-Effekts

In diesem Artikel wird der spezifische Code des j...

Implementierung eines schwebenden Werbestreifens in HTML und CSS

1.html Teil Code kopieren Der Code lautet wie folg...

WePY-Cloud-Entwicklungspraxis im Linux-Befehlsabfrage-Applet

Hallo zusammen, heute werde ich mit Ihnen die WeP...