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

So beheben Sie das Eingabe-Jitter-Problem beim WeChat-Applet

Artikel empfehlen

Beispielcode zur Implementierung der automatischen Markdown-Nummerierung mit reinem CSS

Der Ursprung des Problems Das erste Mal, dass ich...

Zeigen Sie die Festplatten-E/A in Linux an und finden Sie die Prozesse heraus, die viel Lese- und Schreib-E/A beanspruchen

Hintergrund - Online Alert Ein Online-Server hat ...

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

So beheben Sie das Eingabe-Jitter-Problem beim WeChat-Applet

Einführung in den HTML-Standard für chinesische Zeichenkodierung

Detaillierte Erläuterung des Linux-Einzeilenbefehls zur Verarbeitung von Batchdateien

Analyse von Context-Anwendungsszenarien in React

Detaillierte Erläuterung der Lösung für npm ls-Fehler, die durch das fsevents-Modul unter Linux verursacht werden

Eine kurze Diskussion darüber, ob CSS das Rendern von Seiten blockiert

So umgehen Sie unbekannte Feldnamen in MySQL

Automatische Hot-Deployment/Neustart von Jenkins+Tomcat und Lösungen für aufgetretene Probleme (empfohlen)

Empfohlene Plugins und Anwendungsbeispiele für Vue-Unit-Tests

Detaillierte Einführung in den DOCTYPE-Typ

Artikel empfehlen

Beispielcode zur Implementierung der automatischen Markdown-Nummerierung mit reinem CSS

Zeigen Sie die Festplatten-E/A in Linux an und finden Sie die Prozesse heraus, die viel Lese- und Schreib-E/A beanspruchen

Verwenden Sie „overflow: hidden“, um Seiten-Bildlaufleisten zu deaktivieren

Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfiguration unter Linux

Lassen Sie uns über die Merkmale und Isolationsstufen von MySQL-Transaktionen sprechen

So verwenden Sie den Tencent-Schieberegler-Verifizierungscode im Vue3+Vue-cli4-Projekt

Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue

SQL-Methode zum Berechnen der Zeitstempeldifferenz

So klicken Sie auf das A-Tag, um das Dialogfeld zum Hochladen der Eingabedatei zu öffnen

Detaillierte Erläuterung der MySQL SQL99-Syntax für Inner Join und Non-Equivalent Join

Detailliertes Tutorial zum Ausführen von Tomcat im Debugmodus im IDEA Maven-Projekt

Beispielcode für HTML-Layered-Box-Shadow-Effekt

Detaillierte Erklärung der Zeit- und Datumsverarbeitung von moment.js

So implementieren Sie die Online-Hot-Migration von virtuellen KVM-Maschinen (Bild und Text)

So erzielen Sie mit three.js einen dynamischen 3D-Texteffekt