CSS Clear Float Clear:Both Beispielcode

Heute werde ich mit Ihnen über das Löschen von Floats sprechen. Bevor ich über das Löschen von Floats spreche, müssen Sie verstehen, was Floats sind. Ich werde Ihnen hier keine detaillierte Einführung in Floats geben.
Schweben bedeutet, sich außerhalb des Dokumentflusses zu befinden. Wenn es sich außerhalb des Dokumentflusses befindet, können die Breite und Höhe des übergeordneten Elements nicht durch das untergeordnete Element gestreckt werden. Daher müssen wir das Schweben verstehen. Kommen wir ohne weitere Umschweife zum Code.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
        }
        .Kasten{
            Breite: 1000px;
            Rand: 0 automatisch;
            Rand: 8px tief schwarz;
        }
        .box::nach{
            Inhalt: "";
            klar: beides;
            Anzeige: Block;
        }
        .box .links{
            Breite: 50%;
            Höhe: 300px;
            Hintergrundfarbe: rot;
            schweben: links;
        }
        .box .rechts{
            Breite: 50%;
            Höhe: 300px;
            Hintergrundfarbe: blau;
            schweben: rechts;
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Box">
        <div Klasse="links"></div>
        <div Klasse="rechts"></div>
    </div>
</body>
</html>

Bildbeschreibung hier einfügen

Hier können wir sehen, dass bei Verwendung der schwebenden Funktion die Breite und Höhe des übergeordneten Elements nicht durch das untergeordnete Element gestreckt werden kann und das Layout daher anders ausfällt als Sie es sich vorgestellt haben. Hier gibt es viele Lösungen.

Der Erste:

Fügen Sie dem übergeordneten Element ein Div hinzu und löschen Sie den Float für das hinzugefügte Div.

 <div Klasse="klar"></div>
   klar{
            klar: beides;
        }

Zweiter Typ:

Wir können die Höhe des übergeordneten Div festlegen, was ebenfalls möglich ist.

 .Kasten{
            Breite: 1000px;
            Höhe: 300px;
            Rand: 0 automatisch;
            Rand: 8px tief schwarz;
        }

Der dritte

Wir können dem übergeordneten Element das Attribut overflow:hidden; hinzufügen. Das funktioniert auch.

.Kasten{
            Überlauf: versteckt;
            Breite: 1000px;
            Rand: 0 automatisch;
            Rand: 8px tief schwarz;
        }

Der vierte

Wir können die Position „absolute“ oder „display: inline-block“ verwenden, um das Schweben zu löschen.

.Kasten{
            /* Position: absolut; */
            Anzeige: Inline-Block;
            Breite: 1000px;
            Rand: 0 automatisch;
            Rand: 8px tief schwarz;
        }

Eigentlich reicht es aus, die anderen vier Typen zu kennen, aber Sie müssen wissen, wie man den fünften Typ verwendet. Die anderen vier Typen können schwebende Elemente löschen, aber sie verursachen unnötige Probleme. Nehmen wir den zweiten Typ als Beispiel. Wenn das übergeordnete Element später untergeordnete Elemente hinzufügen muss, müssen wir auch die Höhe des übergeordneten Elements ändern, was eine Menge Probleme verursacht. Der fünfte Typ ist auch der praktischste.

Der fünfte

Verwenden Sie Pseudoelemente, um Floats zu löschen. Wir können dem übergeordneten Element Pseudoelemente hinzufügen.

.box::nach{
            Inhalt: "";
            klar: beides;
            Anzeige: Block;
        }

Dies ist das Ende dieses Artikels über den Beispielcode von CSS clear float clear:both. Weitere verwandte CSS clear both-Löschinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder weiter unten in den verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: JS verwendet Clip-Pfad, um eine dynamische Bereichs-Clipping-Funktion zu implementieren

>>: Installation und Konfiguration des automatischen Mount-Dienstes AutoFs im Linux-System

Lösung für das Problem, dass die Audiokomponente des WeChat-Applets unter iOS nicht abgespielt werden kann.

Detaillierte Erklärung, wie Sie verhindern können, dass Inhalte auf HTML-Seiten ausgewählt, kopiert oder mit der rechten Maustaste angeklickt werden.

Artikel

CSS Clear Float Clear:Both Beispielcode

Lösung für das Problem, dass die Audiokomponente des WeChat-Applets unter iOS nicht abgespielt werden kann.

Beispielcode zur Implementierung eines Radardiagramms mit vue+antv

Entmystifizierung des HTML 5-Arbeitsentwurfs

Detaillierte Erklärung, wie Sie verhindern können, dass Inhalte auf HTML-Seiten ausgewählt, kopiert oder mit der rechten Maustaste angeklickt werden.

Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Rahmen spielen

Eine kurze Erläuterung zur Verwendung des kartesischen Produktprinzips zum Abfragen mehrerer Tabellen in MySQL

Greifen Sie auf die MySQL-Datenbank zu, indem Sie unter Windows über cmd das DOS-Fenster aufrufen

Implementierung und Optimierung von MySql-Unterabfragen IN

Beispiel für das Schreiben von mobilem H5 zum Aufrufen einer APP (IOS, Android)

Detaillierte Erklärung der Prinzipien des responsiven Systems von Vue

Artikel empfehlen

Beispiele für korrekte Beurteilungsmethoden für Datentypen in JS

Eine detaillierte Einführung in die Neugestaltung der Weibo-Komponente auf der Website (Bilder und Text)

Detaillierte Erklärung zum Herunterladen, Installieren und Verwenden des Nginx-Servers

So entfernen Sie den gepunkteten Rahmen beim Klicken auf einen Link in FireFox

Einführung und Verwendung der Angular-Pipeline PIPE

Beschreibung des hr-Tags in verschiedenen Browsern

jQuery-Plugin zur Implementierung des sekundären Akkordeonmenüs

Zusammenfassung der gebräuchlichen Buchstaben in Unicode

Detaillierte Erklärung des Initialisierungsmechanismus in Bash

So verwenden Sie benutzerdefinierte Bilder in HTML zum Anzeigen von Kontrollkästchen

Beispiel für die Implementierung eines Login-Effekts mit Vue-ElementUIs aus einem Formular

So implementieren Sie die autorisierte WeChat-Anmeldung elegant in einem Vue3-Projekt

Ladeanimation mit CSS3 implementiert

JavaScript-Entwurfsmuster, Lernadaptermuster

So verwalten Sie große Datei-Uploads und Breakpoint-Resumes basierend auf js