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

Artikel empfehlen

Vue SPA-Lösung zur Optimierung des ersten Bildschirms

Inhaltsverzeichnis Vorwort Optimierung SSR Import...

MySQL 8.0.20 Window10 kostenlose Installationsversion Konfiguration und Navicat Management Tutorial Grafik detaillierte Erklärung

1. MySQL 8.0.20 herunterladen und dekomprimieren ...

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

CSS Sticky Footer-Implementierungscode

Javascript-Betriebsmechanismus „Event Loop“

Implementierungscode zur Verwendung der MongoDB-Datenbank in Docker

Gängige Master-Slave-Replikationsarchitekturen in MySQL 4

Zusammenfassung mehrerer häufig verwendeter String-Methoden in JavaScript (unbedingt lesenswert für Anfänger)

Vue-Router erlaubt keine Navigation zum aktuellen Standort (/Pfad) Fehlerursachen und -behebungen

So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis

In einem Artikel erfahren Sie, wie Sie Vue-Frontend-Paging und Backend-Paging implementieren.

Praktisches Beispiel einer virtuellen Vue-Liste

Detaillierte Erklärung des EXPLAIN-Befehls und seiner Verwendung in MySQL

Artikel empfehlen

Vue SPA-Lösung zur Optimierung des ersten Bildschirms

MySQL 8.0.20 Window10 kostenlose Installationsversion Konfiguration und Navicat Management Tutorial Grafik detaillierte Erklärung

Implementierung der Parametersprungfunktion im Vue-Projekt

Vue implementiert rekursiv benutzerdefinierte Baumkomponenten

Detaillierte Erläuterung der Nginx-Installation, SSL-Konfiguration und allgemeinen Befehle unter Centos7.x

Lösung für den Fehler beim Aufruf von Yum im Docker-Container

Webseiten in Schwarzweiß umwandeln (kompatibel mit Google, Firefox, IE und anderen Browsern)

MySQL verwendet ein Limit, um die Beispielmethode für Paging zu implementieren

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.16 (Ubuntu 16.04)

Implementierungsschritte zur Installation eines Redis-Containers in Docker

Detaillierte Erläuterung des Kapselungsbeispiels für Netzwerkanforderungen

IDEA2020.1.2 Detailliertes Tutorial zum Erstellen eines Webprojekts und Konfigurieren von Tomcat

Leitfaden zur effizienten Nutzung von MySQL-Indizes

So verwenden Sie MySQL Binlog zum Wiederherstellen versehentlich gelöschter Datenbanken

Automatische Zeilenumbrüche in HTML-Pre-Tags