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

Detaillierte Schritte zur Installation von Python 3.7 auf CentOS 6.5

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

Detaillierte Schritte zur Installation von Python 3.7 auf CentOS 6.5

MySQL in Ubuntu 18.04 installieren (grafisches Tutorial)

Praktischer Bericht über die Entwicklung von Vue3- und TypeScript-Projekten

Techniken zur Optimierung von MySQL-Paging-Abfragen

Detailliertes Tutorial zum Bereitstellen eines Django-Projekts unter CentOS

Entwickeln Sie Beispielcode für einen Taschenrechner mit nativem JavaScript

Analyse der Unfallursachen durch Unicode-Signatur BOM

Schritte zum Verpacken und Bereitstellen des Vue-Projekts auf dem Apache-Server

Detaillierte Schritte zum Bereitstellen von https-Websites und Konfigurieren der Adressumschreibung in Nginx

Installations- und Verwendungsschritte für vue-amap

Artikel empfehlen

So verwenden Sie allgemeine MySQL-Funktionen zur Verarbeitung von JSON

GZIP-Komprimierung Tomcat und Prozessdiagramm zur Verbesserung der Web-Leistung

Die ultimative Lösung zum Schreiben von Bash-Skripten mit Node.js

So verwenden Sie MySQL zur Abdeckung von Index- und Tabellenrückgabe

Eine einfache Methode, um mit der Mindestbreite und Mindesthöhe von IE6 kompatibel zu sein

Element Tabelle Tabellenkomponente Mehrfeld (Mehrspalten) Sortiermethode

25 Tipps und Tricks zur Div+CSS-Programmierung

Vue implementiert ein Beispiel zum Herunterziehen und Scrollen zum Laden von Daten

Detaillierte Schritte zur Installation von Tomcat, MySQL und Redis mit Docker

Beispielcode zur Implementierung des Vollbild-Scrolleffekts von fullpage.js mit CSS

Lösung für „Ubuntu kann keine Verbindung zum Netzwerk herstellen“

Informationen zum Textumbruchproblem bei IE-Labels (LI)

Sperrt Mysql ALTER TABLE die Tabelle beim Hinzufügen von Feldern?

So finden und löschen Sie doppelte Zeilen in MySQL

Zusammenfassung des Umschaltproblems und der Lösung zur Installation mehrerer JDK-Versionen im 64-Bit-System von Win10