Warum der CSS-Attributwert clear:right im Detail nicht funktioniert

Die Verwendung der Clear-Eigenschaft zum Löschen von Floats ist eine gängige Vorgehensweise und die Definition der Clear-Eigenschaft ist Ihnen möglicherweise vertraut.
Beispielsweise löscht clear:left das schwebende Element auf der linken Seite. Der Beispielcode lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

Code anzeigen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>Ameisenstamm</title>
<style type="text/css">
.Erste
{
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgehend rot;
schweben: links;
}
.zweite
{
Breite: 100px;
Höhe: 100px;
Rand: 1px, durchgehend blau;
schweben: links;
}
.dritte
{
Breite: 100px;
Höhe: 100px;
Rand: 1px, durchgehend grün;
schweben: links;
klar:links;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Erste"></div>
<div Klasse="zweite"></div>
<div Klasse="dritte"></div>
</body>
</html>

Aus dem obigen Code können wir erkennen, dass das Attribut „clear:left“ des dritten Div verwendet wird und das Element umbrochen wird. Bei Verwendung des Attributs „clear:right“ funktioniert es jedoch möglicherweise nicht. Der Beispielcode lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

Code anzeigen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>Ameisenstamm</title>
<style type="text/css">
.Erste
{
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgehend rot;
schweben: links;
}
.zweite
{
Breite: 100px;
Höhe: 100px;
Rand: 1px, durchgehend blau;
schweben: links;
klar: richtig;
}
.dritte
{
Breite: 100px;
Höhe: 100px;
Rand: 1px, durchgehend grün;
schweben: links;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Erste"></div>
<div Klasse="zweite"></div>
<div Klasse="dritte"></div>
</body>
</html>

Obwohl das zweite Div im obigen Code den Code „clear:right“ hat, wird auf seiner rechten Seite dennoch ein schwebendes Element angezeigt. Dieser Hauptcode wird sequenziell ausgeführt. Wenn das zweite Div ausgeführt wird, um den rechten Float zu löschen, wurde das dritte Div nicht geladen, sodass sein Löscheffekt ungültig ist und das dritte Div dennoch dem zweiten Div folgt.

<<: Erweiterte benutzerdefinierte JavaScript-Ausnahme

>>: So lösen Sie das Problem, dass die Website kein direktes Kopieren von Seiteninhalten oder Informationen zulässt

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

1. Dokumentenfluss und Floating 1. Was ist Dokume...

Warum der CSS-Attributwert clear:right im Detail nicht funktioniert

Rendern im Vue-Scaffolding verstehen

Die Lösung von html2canvas, dass Bilder nicht normal erfasst werden können

CSS: besuchte geheime Erinnerungen des Pseudoklassenselektors

Beispiel zum Entfernen eines JSON-Backslashs in PHP

Detaillierte Erklärung des Unterschieds zwischen Flex und Inline-Flex in CSS

Der Unterschied zwischen Hash-Modus und Verlaufsmodus im Vue-Router

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Fragen und Antworten: Unterschiede zwischen XML und HTML

So kompilieren Sie Nginx neu und fügen Module hinzu

Detaillierte Erläuterung des Prozesses zum Erstellen von Bodennavigationseffekten mit JavaScript

Artikel empfehlen

Vue+js: Klicken Sie auf den Pfeil, um die Bilder zu wechseln

Beispielcode für die Master-Slave-Trennung einer MySQL-Datenbank

Implementierung eines Docker-Compose-Bereitstellungsprojekts basierend auf MySQL8

Verwendung von Provide und Inject in Vue3

Ein Artikel, der Ihnen hilft, die Positionsberechnung in js gründlich zu verstehen

Erläuterung der grundlegenden Syntax gespeicherter Prozeduren in der MySQL-Datenbank

Kostenlose MySQL-Installationsversion (zip) – ausführliches Tutorial zur Installation und Konfiguration

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

So löschen Sie Junk-Dateien elegant in Linux

Springboot integriert die Docker-Bereitstellung, um zwei Möglichkeiten zum Erstellen von Docker-Images zu implementieren

Detaillierte Erklärung der Funktionsweise der Node.js-Middleware

Eine ausführliche Zusammenfassung der Überlegungen zu MySQL-Zeiteinstellungen

Lösen Sie das Problem, dass das Element DateTimePicker+vue Popup-Box nur Stunden anzeigt

So installieren Sie Elasticsearch und Kibana in Docker

Beispiel für die Integration von Kafka mit Nginx