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

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

Detaillierte Erklärung des daily_routine Beispielcodes in Linux

Schauen Sie sich zunächst den Beispielcode an: #/...

Ausführen von PostgreSQL in Docker und Empfehlung verschiedener Verbindungstools

1 Einleitung PostgreSQL ist ein kostenloses objek...

CSS zum Erzielen einer Schließen-Schaltfläche zum Vergrößern und Verkleinern (Beispielcode)

Dieser Effekt tritt am häufigsten auf unserer Bro...

Detaillierte Analyse des Problems beim Hinzufügen von Where-Bedingungen mit Left Join in MySQL

Aktuelle Nachfrage: Es gibt zwei Tabellen, Gruppe...

Schritte für Docker zum Erstellen eines eigenen lokalen Image-Repositorys

1. Umgebung und Vorbereitung 1. Ubuntu 14.04 2.Do...

So aktualisieren Sie MySQL 5.6 auf 5.7 unter Windows

Vorne geschrieben Es gibt zwei Möglichkeiten, MyS...

Detaillierte Erklärung der Verwendung von SetUp- und Reactive-Funktionen in Vue3

1. Wann soll setUp ausgeführt werden? Wir alle wi...

Callback-Funktionen in JavaScript verstehen und verwenden

Inhaltsverzeichnis Überblick Was sind Rückrufe od...

Automatische Dateisynchronisierung zwischen zwei Linux-Servern

Wenn Server B (172.17.166.11) eingeschaltet oder ...

Zusammenfassung der @-Verwendung in CSS (mit Beispielen und Erklärungen)

Eine At-Regel ist eine Deklaration, die Anweisung...

Betrachten des Threadmodells von Tomcat aus der Connector-Komponente – BIO-Modus (empfohlen)

In höheren Versionen von Tomcat ist der Standardm...

Detailliertes Beispiel für die Bereitstellung der dynamischen und statischen Trennung von Nginx+Apache

Einführung in die dynamische und statische Trennu...

Beispiel zum Erstellen eines öffentlichen Harbor-Repository mit Docker

Im vorherigen Blogbeitrag ging es um das private ...

Sprungcode für HTML-Seite

Speichern Sie den folgenden Code als Standard-Home...

Detaillierte Erklärung zur Konfiguration des Keepalived-Protokolls auf einem anderen Pfad in CentOS7

Keepalived-Installation: cd <keepalived_source...