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 Installation und Konfiguration von Subversion (SVN) unter Ubuntu

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

Detaillierte Installation und Konfiguration von Subversion (SVN) unter Ubuntu

Lösung für das Problem, dass Tomcat beim normalen Zugriff auf localhost eine 404-Meldung ausgibt

Instanzmethode für MySQL-String-Verkettung und Festlegen von Nullwerten

Beispiele für die Verwendung von HTML-Metadaten

Details zum MySQL-Index-Pushdown

JavaScript imitiert die Spezialeffekte der Jingdong-Lupe

Verständnis des CSS-Selektorgewichts (persönlicher Test)

Installations-JDK-Tutorialanalyse für Linux-System (Centos6.5 und höher)

Informationen zu VUEs Kompilierungsumfang und Slotumfang-Slotproblemen

Erfahren Sie mehr über die am häufigsten verwendeten JavaScript-Ereignisse

Artikel empfehlen

Warum MySQL große Transaktionen vermeiden sollte und wie man sie löst

So gehen Sie mit dem Fehler beim Einfügen seltener Zeichen in MySQL um (falscher Zeichenfolgenwert)

JS ermittelt die Position des n-ten Vorkommens einer angegebenen Zeichenfolge in einer Zeichenfolge

Die Vorteile von Div+CSS und Web-Standardseiten

So verwenden Sie Mixins in Vue

So zeigen Sie allgemeine Symbole auf dem Desktop in Windows Server 2012 an oder verbergen sie

Analyse der Prinzipien und der Nutzung von Docker-Container-Datenvolumes

Detaillierte Erläuterung der geplanten Aufgaben für normale Benutzer unter Linux

15 Linux-Befehlsaliase, die Ihnen Zeit sparen

Allgemeine MySQL-Anweisungen zum Anzeigen von Transaktionen und Sperren

Mein CSS-Framework – base.css (Browser-Standardstil zurücksetzen)

So laden Sie Komponentenbibliotheken von Drittanbietern bei Bedarf in Vue3

So leiten Sie über den Nginx-Lastausgleich zu https um

So konfigurieren Sie die Datei My.ini bei der Installation der MySQL5.6.17-Datenbank

Analyse des Unterschieds zwischen fettgedrucktem <b> und <strong>