Informationen zum CSS-Floating und zum Aufheben des Floatings

Definition von Float

Setzt das Element aus dem normalen Dokumentfluss heraus und verschiebt das Element näher nach links oder rechts. Die Kante des übergeordneten Elements oder die Kante anderer Elemente, die auf schweben gesetzt sind

Probleme schweben lösen

1. Lösen Sie das Problem von Text um Bilder herum
2. Lösen Sie das Abstandsproblem
3. Sie können nach links oder rechts layouten

Platzieren Sie den Text links neben dem Bild

Wenn Float nicht verwendet wird:

Bildbeschreibung hier einfügen

Bei Verwendung von Float:

Bildbeschreibung hier einfügen

Verwendete Attribute

Verwendetes Attribut: Float, Attributwert: rechts/links

Problem des schwebenden Höhenkollapses und Lösung Problem des Höhenkollapses

Wenn die für das übergeordnete Element festgelegte Höhe von der für das untergeordnete Element festgelegten Höhe abweicht, tritt ein Problem mit der Höhenreduzierung auf. Beim Einfügen von Text kann dieser nicht an der richtigen Position eingefügt werden und die Höhenreduzierung führt dazu, dass der Titel nicht unter diesem Block angezeigt wird:

Bildbeschreibung hier einfügen

Nach dem Lösen von:

Bildbeschreibung hier einfügen

Problemumgehung

Pseudoelement-Löschfloß:
Setzen Sie ein Pseudoelement nach dem übergeordneten Element, um den Float zu löschen:
1. Anzeige entsprechend dem übergeordneten Tag einstellen
2. Setzen Sie clear:both erneut
Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <style type="text/css">
        .Elternteil{
            Breite: 400px;
            Höhe: 400px;
            Rand: 0 automatisch;
            Anzeige: Block;
            Hintergrund: hellgrau;
        }
        .parent:nach{
            Inhalt: "";
            Anzeige: Block;
            klar: beides;
        }
        .Kind{
            Anzeige: Inline-Block;
            Breite: 200px;
            Höhe: 200px;
            Hintergrund: hellblau;
            schweben: links;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="übergeordnet">
    <div Klasse="Kind"></div>
    <div Klasse="Kind"></div>
    <div Klasse="Kind"></div>
</div>
<h1>Dies ist eine Überschrift</h1>
<div></div>
</body>
</html>

Dies ist das Ende dieses Artikels über CSS-Floating- und Cancelling-Floating-Effekte. Weitere relevante CSS-Floating- und Cancelling-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Implementierung der Funktion zum Speichern von Screenshots aus HTML in PDF

>>: Eine Minute, um die Laufruhe von HTML+Vue+Element-UI zu erleben

Ideen und Praxis einer mehrsprachigen Lösung für ein Vue.js-Frontend-Projekt

Detaillierte Erläuterung der erzwungenen Freigabe belegter Ports unter Linux und der Methode zum Öffnen von Ports in der Linux-Firewall

Artikel

Verwendung und Unterschiedsanalyse von „Ersetzen in“ und „Einfügen in“ beim Update doppelter Schlüssel in MySQL

Artikel

Informationen zum CSS-Floating und zum Aufheben des Floatings

Definition von Float

Probleme schweben lösen

Platzieren Sie den Text links neben dem Bild

Ideen und Praxis einer mehrsprachigen Lösung für ein Vue.js-Frontend-Projekt

So implementieren Sie eine einzelne Dateikomponente in JS

So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue

So löschen Sie eine MySQL-Tabelle

Erläuterung der Linux-Kernel-Optimierungskonfiguration für hochparallele Nginx-Server

So erstellen Sie einen Nginx-Image-Server mit Docker

Lösen Sie das Problem der Verwendung von weniger in Vue

MySQL Infobright-Installationsschritte

Detaillierte Erläuterung der erzwungenen Freigabe belegter Ports unter Linux und der Methode zum Öffnen von Ports in der Linux-Firewall

Verwendung und Unterschiedsanalyse von „Ersetzen in“ und „Einfügen in“ beim Update doppelter Schlüssel in MySQL

Artikel empfehlen

Vue implementiert einen Einkaufswagen, der die Einkaufsmenge ändern kann

Zusammenfassung der MySQL-Vollsicherung, Master-Slave-Replikation, kaskadierenden Replikation und Halbsynchronisierung

Detaillierte Erklärung des JS-Speicherplatzes

Rückgängigmachen der Anmeldung in MySQL

In welchen Szenarien in JavaScript können Pfeilfunktionen nicht verwendet werden?

Beispiel-Tutorial für geplante MySQL-Aufgaben

Warum wird in React nicht empfohlen, einen Index als Schlüssel zu verwenden?

Vue-Routing zum Implementieren der Login-Abfangung

Anweisungen zum Wiederherstellen von Daten nach versehentlichem Löschen einer MySQL-Datenbank

Wettersymbol-Animationseffekt implementiert durch CSS3

Detaillierte Erklärung zur Verwendung der Vue-Komponente zur Kennzeichensuche

So installieren Sie MySQL über SSH auf einem CentOS VPS

Lösen Sie das Problem der Ausführung von „Hello World“ nach der Docker-Installation

Analyse des Prozesses zum Bereitstellen reiner HTML-Dateien in Tomcat und WebLogic

MySQL-Leistungsoptimierungs-Index-Pushdown