Zwei Möglichkeiten zum Löschen von Floats in HTML

1. Methode 1 zum Löschen von Floating

Legen Sie die Höhe des vorherigen übergeordneten Elements fest. Hinweis: Schreiben Sie bei der Unternehmensentwicklung die Höhe möglichst nicht.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <Titel>D131_ClearFloat</Titel>
    <Stil>
        .smallbox1{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rot;
            Körper: 3px tiefschwarz;
            Rand: 5px;
            schweben: rechts;

        }
        .smallbox2{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rot;
            Körper: 3px tiefschwarz;
            Rand: 5px;

        }
        .smallbox3{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rot;
            Körper: 3px tiefschwarz;
            Rand: 5px;

        }
        .smallbox4{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rot;
            Körper: 3px tiefschwarz;
            Rand: 5px;

        }
        .smallbox5{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rot;
            Körper: 3px tiefschwarz;
            Rand: 5px;

        }
        .smallbox6{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: rot;
            Körper: 3px tiefschwarz;
            Rand: 5px;

        }
        .bigbox1,.bigbox2{
            /*Breite:400px;*/
            /*Breite:400px;*/
            Hintergrundfarbe: grün;
            Rand: 3px schwarz durchgezogen;
        }
</Stil>
</Kopf>
<Text>
<div Klasse="bigbox1">
    <div Klasse="smallbox1"></div>
    <div Klasse="smallbox2"></div>
    <div Klasse="smallbox3"></div>
</div>
<div Klasse="bigbox2">
    <div Klasse="smallbox4"></div>
    <div Klasse="smallbox5"></div>
    <div Klasse="smallbox6"></div>
</div>
</body>
</html>

2. Der zweite Weg, um schwebende

Fügen Sie das Attribut „clear“ zu den folgenden Attributen hinzu

Attributwert löschen:

Keine: Standardwert, die Sortierung erfolgt nach den Sortierregeln für schwebende Elemente (links schwebend findet links schwebend, rechts schwebend findet rechts schwebend)

left: Nicht nach dem vorherigen linken schwebenden Element suchen

rechts: Nicht nach dem vorherigen rechten schwebenden Element suchen

beide: Nicht nach den vorherigen linken schwebenden und schwebenden Elementen suchen

Wenn wir beispielsweise die Breite und Höhe der großen Box nicht festlegen, unterstützt die kleine Box die große Box, aber die beiden großen Boxen befinden sich auf derselben Zeile.

 .smallbox1{
            Breite: 100px;
            Höhe: 100px;
            schweben: links;
            Hintergrundfarbe: rot;
            Rand: 2px, durchgehend schwarz;
        }
        .smallbox2{
            Breite: 100px;
            Höhe: 100px;
            schweben: links;
            Hintergrundfarbe: rot;
            Rand: 2px, durchgehend schwarz;
        }
        .smallbox3{
            Breite: 100px;
            Höhe: 100px;
            schweben: links;
            Hintergrundfarbe: blau;
            Rand: 2px, durchgehend schwarz;
        }
        .smallbox4{
            Breite: 100px;
            Höhe: 100px;
            schweben: links;
            Hintergrundfarbe: blau;
            Rand: 2px, durchgehend schwarz;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="bigbox1">
    <div Klasse="smallbox1"></div>
    <div Klasse="smallbox2"></div>
</div>
<div Klasse="bigbox2">
    <div Klasse="smallbox3"></div>
    <div Klasse="smallbox4"></div>
</div>
</body>

Wir verwenden das Clear-Attribut für die dritte Box, damit sie in eine neue Zeile gesetzt werden kann (die vierte Box braucht es nicht, da die dritte Box neben der vierten Box stehen soll). Wir müssen nur den Code der dritten Box ändern.

      .smallbox3{
            klar:links;
            Breite: 100px;
            Höhe: 100px;
            schweben: links;
            Hintergrundfarbe: blau;
            Rand: 2px, durchgehend schwarz;
        }

Hinweis: Das Margin-Attribut ist ungültig. Wir besprechen das nächste Mal, wie man es behebt.

3. Quellcode:

D131_ClearFloat.html

D132_CLearAttribute.html

Adresse:

https://github.com/ruigege66/HTML_learning/blob/master/D131_ClearFloat.html

https://github.com/ruigege66/HTML_learning/blob/master/D132_CLearAttribute.html

Zusammenfassen

Oben sind zwei der Möglichkeiten zum Löschen von HTML-Floats, die ich Ihnen vorgestellt habe. Ich hoffe, sie werden Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<: Ein kurzer Vortrag über Responsive Design

>>: Beispielcode zur Implementierung einer DIV-Aufhängung mit reinem CSS (feste Position)

So installieren Sie Docker auf Ubuntu20.04 LTS

So implementieren Sie ein dynamisches automatisches Hoch- und Herunterfahren von Upstream-Servern ohne Neuladen basierend auf Nginx

Artikel

Basierend auf Vue-Simple-Uploader, kapselt die globale Upload-Plug-In-Funktion des Dateisegment-Uploads, des sofortigen Uploads und der Breakpoint-Fortsetzung

Artikel

Implementierung der One-Click-Verpackung und -Veröffentlichung von Vue-Projekten mit Jenkins

Artikel

So nutzen Sie die Multi-Core-CPU in node.js voll aus

Artikel

Zwei Möglichkeiten zum Löschen von Floats in HTML

So installieren Sie Docker auf Ubuntu20.04 LTS

JS, CSS und HTML zur Implementierung der Registrierungsseite

Ein kurzer Vortrag über den MySQL-Index und die Redis-Sprungtabelle

Vue-Komponente kapselt Beispielcode zum Hochladen von Bildern und Videos

Einführung in die Verwendung gängiger XHTML-Tags

Zusammenfassung einiger Tipps zum Umgehen der Node.js-Codeausführung

So implementieren Sie ein dynamisches automatisches Hoch- und Herunterfahren von Upstream-Servern ohne Neuladen basierend auf Nginx

Basierend auf Vue-Simple-Uploader, kapselt die globale Upload-Plug-In-Funktion des Dateisegment-Uploads, des sofortigen Uploads und der Breakpoint-Fortsetzung

Implementierung der One-Click-Verpackung und -Veröffentlichung von Vue-Projekten mit Jenkins

So nutzen Sie die Multi-Core-CPU in node.js voll aus

Artikel empfehlen

Spezifische Verwendung des Linux-Befehls „dirname“

Lösung für das Problem, dass die Tomcat-Konfiguration in Intelli Idea nicht gefunden wird

Detaillierte Erklärung des Parameters slave_exec_mode in MySQL

Lösung zur Verwendung von html2canvas zum Verarbeiten von Dom-Elementen mit Baidu-Map in Bilder

Verwendung von MySQL DDL-Anweisungen

MySQL-Datenbankgrundlagen: Eine Zusammenfassung der grundlegenden Befehle

Tutorial-Diagramm zur Installation von CentOS 7.3 auf einer virtuellen VMware-Maschine

So fügen Sie die Tomcat-Serverkonfiguration zu Eclipse hinzu

Detaillierte Erklärung des JavaScript-Proxy-Objekts

Detaillierte Erklärung der Funktionsweise von Nginx

Beispiele für die Verwendung von pessimistischem und optimistischem Sperren in MySQL

Detaillierte Erläuterung der Konfigurationspraxis für die MySQL-Master-Slave-Synchronisierung

Ubuntu 18.04 installiert pyenv, pyenv-virtualenv, virtualenv, Numpy, SciPy, Pillow, Matplotlib

Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306

Reines CSS, um coole Neonlichteffekte zu erzielen (mit Demo)