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

Stellen Sie das Vue-Projekt auf einem Linux-Server bereit

Beispiele für Clearfix und Clear

Stellen Sie das Vue-Projekt auf einem Linux-Server bereit

Beim Aktualisieren der automatisch inkrementierten Primärschlüssel-ID in MySQL sind Probleme aufgetreten

Responsive Webdesign lernen (1) - Bildschirmgrösse und prozentuale Nutzung bestimmen

So erben Sie die CSS-Zeilenhöhe

MySQL-Datenbank-JDBC-Programmierung (Java stellt eine Verbindung zu MySQL her)

So stellen Sie Oracle mit Docker auf dem Mac bereit

Untersuchung des Wertes des Positionsattributs in CSS (Zusammenfassung)

Detaillierte Erklärung der globalen Variablenimplementierung von Uniapp

Detaillierter Code zur Implementierung einer 3D-Tag-Cloud in Vue

So installieren Sie den Chrome-Browser auf CentOS 7

Artikel empfehlen

React+Antd implementiert ein Beispiel zum Hinzufügen, Löschen und Ändern von Tabellen

Beispieldemonstration der Vuex-Modularisierung und Namespaces

Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site

MySQL 5.7.18 Installations-Tutorial und Problemübersicht

Implementierung von nacos1.3.0, erstellt mit Docker

So verwenden Sie allgemeine MySQL-Funktionen zur Verarbeitung von JSON

Webdesign-Erfahrung: Selbstgerechte Webdesigner

Implementierungsprozess von row_number in MySQL

So konfigurieren Sie Nginx's Anti-Hotlinking

Detaillierte Erläuterung der JavaScript-Implementierung der Hash-Tabelle

Nginx: Lernen, wie man einen Dienst zum Schutz von Datei-Hotlinks erstellt – Beispiel

Implementieren einer verteilten Sperre mit MySQL

Implementierungsprinzip und Prozessanalyse der TCP-Leistungsoptimierung

Erläuterung zur Verwendung und Änderung des Standard-Programmveröffentlichungspfads von Tomcat

Bringen Sie Ihnen Schritt für Schritt das Tutorial zur MySQL-Abfrageoptimierungsanalyse bei