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

MySQL-Tabellenfeld Zeiteinstellung Standardwert

Artikel

Typische Fälle von MySQL-Indexfehlern

Artikel

Der Unterschied zwischen dem herkömmlichen Tomcat-Startdienst und dem in Springboot integrierten Tomcat-Startdienst (empfohlen)

Artikel

So erstellen Sie einen K8S-Cluster und installieren Docker unter Hyper-V

CSS Clear Float Clear:Both Beispielcode

MySQL-Tabellenfeld Zeiteinstellung Standardwert

Typische Fälle von MySQL-Indexfehlern

Der Unterschied zwischen dem herkömmlichen Tomcat-Startdienst und dem in Springboot integrierten Tomcat-Startdienst (empfohlen)

So erstellen Sie einen K8S-Cluster und installieren Docker unter Hyper-V

Vue-Anpassungsmethode für Großbildschirme

HTML+CSS zur Implementierung des Beispielcodes des Dropdown-Menüs der Navigationsleiste

Detailliertes Grafik- und Text-Tutorial zum Herunterladen, Installieren und Konfigurieren von mysql-5.7.28 unter Windows

Textarea-Tag in HTML

Reagieren Sie auf die Konstruktionsreihenfolge verschachtelter Komponenten

Beispiele für Dateneinschränkungen basierend auf einer MySQL-Datenbank und Einführung in fünf Integritätseinschränkungen

Artikel empfehlen

So extrahieren Sie Zeichenfolgenelemente aus nicht festen Positionen in MySQL

Führen Sie die Schritte aus, um schnell ein Vue3.0-Projekt zu erstellen

So installieren Sie Nginx in CentOS

So fixieren Sie Inhalte beim Scrollen einer HTML-Seite an einer festen Position

Vue+Rem benutzerdefinierter Karusselleffekt

Detaillierte Erläuterung des Problemfalls beim Löschen des Vue KeepAlive-Cache

Bootstrap 3.0 Studiennotizen Rastersystemprinzip

Detaillierte Erklärung des JavaScript ES6-Moduls

Tutorial-Diagramm zur Verwendung von Jenkins für die automatisierte Bereitstellung unter Windows

So implementieren Sie die Paging-Funktion des MyBatis-Interceptors

Native JS implementiert einen sehr gut aussehenden Zähler

Verwenden Sie ein Shell-Skript, um die Python3.8-Umgebung in CentOS7 zu installieren (empfohlen)

6 Lösungen für Netzwerkfehler im Docker-Container

Prioritätsanalyse von und/oder Abfragen in MySQL

Bearbeiten Sie zwei Datenspalten als neue Spalten in SQL