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

Wie CSS die Zeit des weißen Bildschirms während des ersten Ladens beeinflusst

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

Wie CSS die Zeit des weißen Bildschirms während des ersten Ladens beeinflusst

Schritte zum Initialisieren des Passworts nach der ersten erfolgreichen Installation von MySQL

Mysql behält den vorhandenen Inhalt bei und fügt später Inhalte hinzu

Tutorial zur binären Kompilierung und Installation von MySql centos7 unter Linux

So passen Sie die Textgröße im Webdesign an: Kleiner Text, großes Erlebnis

Schritte zum Konfigurieren von IIS10 unter Win10 und zum Unterstützen des Debuggens von ASP-Programmen

MySQL-Tabellenübergreifende Abfrage und Tabellenübergreifende Aktualisierung

So verwenden Sie JS, um zu überprüfen, ob sich ein Element im Ansichtsfenster befindet

Umfassende Interpretation der MySQL Master-Slave-Replikation, vom Prinzip bis zur Installation und Konfiguration

Docker-Installationstutorial: Erste Schritte (Anfängerausgabe)

Artikel empfehlen

So verstehen Sie das Ref-Attribut von React genau

Detaillierte Erklärung, wie MySQL (InnoDB) mit Deadlocks umgeht

Stellen Sie Ihre Website automatisch auf den IE7-Kompatibilitätsmodus ein, wenn Sie mit IE8 surfen

Beispiel einer MySQL-Implementierung einer Volltextsuche und einer Methode zur Bewertung von Schlüsselwörtern

Eine detaillierte Einführung in die Tomcat-Verzeichnisstruktur

Vue realisiert den Logistik-Timeline-Effekt

Detaillierte Erklärung der Anwendung und des Unterschieds zwischen Filterattribut und Hintergrundfilter in CSS

Über das WeChat Mini-Programm zur Implementierung von Cloud-Zahlungen

Ubuntu 20.04 – Bestes Konfigurationshandbuch (unverzichtbar für Anfänger)

Auszeichnungssprache - CSS-Stile für Text festlegen

So nutzen Sie Partitionierung, um die MySQL-Datenverarbeitung für Milliarden von Daten zu optimieren

Detaillierte Schritte zum Einrichten und Konfigurieren von NIS-Domänendiensten auf Centos8

MySQL 8.0 MIT Abfragedetails

Erläuterung des Problems bei der Auswahl des MySQL-Speicherzeittyps

Detaillierte Installation und Verwendung von SSH in der Ubuntu-Umgebung