Zusammenfassung der CSS-Methoden zum Löschen von Floats

Float wird häufig im Layout von Webseiten verwendet, aber die schwebenden Blockelemente liegen außerhalb des standardmäßigen Dokumentflusses, wodurch das übergeordnete Element des schwebenden Elements keine Höhe hat, was wiederum dazu führt, dass das übergeordnete Element keine Höhe hat. Daher ist es notwendig, die Auswirkungen von Float auf das übergeordnete Element zu beseitigen. Dieser Artikel stellt mehrere Methoden zum Beseitigen von Float vor.

Mehrere Möglichkeiten, den Schwebeeffekt zu beseitigen: Legen Sie die Höhe des übergeordneten Elements fest

Effektbild:

Code:

<Stil>
    * {
        Polsterung: 0;
        Rand: 0;
    }
    .header {
        Höhe: 30px;
        Zeilenhöhe: 30px;
        Hintergrundfarbe: #333;
    }
    .header ein {
        Farbe: #fff;
        Textdekoration: keine;
    }
    ul {
        schweben: rechts;
    }
    li {
        schweben: links;
        Listenstil: keiner;
        Polsterung rechts: 20px;
    }
</Stil>

<div Klasse="Header">
    <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Fragen und Antworten</a></li>
        <li><a href="#">Hilfe</a></li>
        <li><a href="#">Über</a></li>
    </ul>
</div>

Externe Wandmethode: Verwenden Sie ein leeres Block-Level-Element, um den CSS-Stil Clear hinzuzufügen und den Float zu löschen.

Hinweis: Blockebenenelementen mit dem Stil „Clear“ können keine Randattribute hinzugefügt werden.

Effektbild:

Code:

<Stil>
    * {
        Polsterung: 0;
        Rand: 0;
    }
    .header {
        /* Hintergrundfarbe: #333; */
    }
    .header ein {
        /* Farbe: #fff; */
        Textdekoration: keine;
    }
    ul {
        schweben: rechts;
    }
    li {
        schweben: links;
        Listenstil: keiner;
        Polsterung: 5px 20px;
    }

    .klarfix {
        Höhe: 10px;
        Hintergrundfarbe: rot;
        klar: beides;
    }

    .hauptsächlich {
        Farbe: #fff;
        Höhe: 100px;
        Hintergrundfarbe: blau;
    }
</Stil>

<div Klasse="Header">
    <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Fragen und Antworten</a></li>
        <li><a href="#">Hilfe</a></li>
        <li><a href="#">Über</a></li>
    </ul>
    
</div>

<div Klasse="clearfix"></div>
    
<div class="main">Hauptinhalt</div>

Innenwandmethode: Verwenden Sie ein leeres Blockelement, um den CSS-Stil „clear“ hinzuzufügen und so den Float zu löschen.

Effektbild:

Code:

<Stil>
    * {
        Polsterung: 0;
        Rand: 0;
    }
    .header {
        Hintergrundfarbe: #333;
    }
    .header ein {
        Farbe: #fff;
        Textdekoration: keine;
    }
    ul {
        schweben: rechts;
    }
    li {
        schweben: links;
        Listenstil: keiner;
        Polsterung: 5px 20px;
    }
    .klarfix {
        klar: beides;
    }
</Stil>

<div Klasse="Header">
    <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Fragen und Antworten</a></li>
        <li><a href="#">Hilfe</a></li>
        <li><a href="#">Über</a></li>
    </ul>
    <div Klasse="clearfix"></div>
</div>

Die Innenwandmethode hat gegenüber der Außenwandmethode relative Vorteile:

Nachdem die Innenwandmethode festgelegt wurde, wird das übergeordnete Element des schwebenden Elements gestreckt, d. h. die Höhe

Fügen Sie overflow:hidden zum übergeordneten Element des schwebenden Elements hinzu

Ursprüngliche Bedeutung: Versteckten Inhalt entfernen und allen Inhalt ausblenden, der über den Rahmen hinausgeht.

Effektbild:

Code:

<Stil>
    * {
        Polsterung: 0;
        Rand: 0;
    }
    .header {
        Hintergrundfarbe: #333;
        Überlauf: versteckt;
    }
    .header ein {
        Farbe: #fff;
        Textdekoration: keine;
    }
    ul {
        schweben: rechts;
    }
    li {
        schweben: links;
        Listenstil: keiner;
        Polsterung: 5px 20px;
    }

    .hauptsächlich {
        Farbe: #fff;
        Höhe: 100px;
        Hintergrundfarbe: blau;
    }
</Stil>

<div Klasse="Header">
    <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Fragen und Antworten</a></li>
        <li><a href="#">Hilfe</a></li>
        <li><a href="#">Über</a></li>
    </ul>
</div>
    
<div class="main">Hauptinhalt</div>

Zusammenfassen

Das Obige ist eine Zusammenfassung der vom Editor eingeführten CSS-Methoden zum Löschen von Floating. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird 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!

<<: Zusammenfassung der Methode von React zum Erstellen von Komponenten

>>: So zeigen Sie die IP-Adresse von Linux in einer virtuellen VMware-Maschine an

Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen

Zusammenfassung der CSS-Methoden zum Löschen von Floats

Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen

js zur Realisierung einer einfachen Warenkorbfunktion

Prozessdiagramm für die Ideenbereitstellung und Tomcat-Dienstimplementierung

Verschiedene Transformationseffekte beim Umschalten von HTML-Webseiten

Detaillierte Erklärung dieses Zeigeproblems in JavaScript

Implementierung des Vue-Top-Tags-Browserverlaufs

Detaillierte Erläuterung der asynchronen Axios-Kommunikation in Vue

So kapseln Sie Abfragekomponenten basierend auf Element-UI Schritt für Schritt

So fügen Sie auf dem Mac automatische Vervollständigungsbefehle für Docker und Kubectl hinzu

Schritte zur Verwendung von ORM zum Hinzufügen von Daten in MySQL

Artikel empfehlen

MySQL verwendet benutzerdefinierte Sequenzen zur Implementierung von row_number-Funktionen (detaillierte Schritte)

Zusammenfassung der Bootstrap-Lernerfahrung - Austausch von Designs im CSS-Stil

Detaillierte Beschreibung des MySQL-Ersetzens in der Verwendung

Implementierung der Docker-Bereitstellung eines MySQL-Clusters

So verstehen Sie den einfachen Speichermodus der Statusverwaltung von Vue

Verwenden Sie Docker, um den Kong-Clusterbetrieb aufzubauen

So importieren und exportieren Sie Docker-Images

Welche versteckten Attribute im Formular können mit dem Formular übermittelt werden?

Lösen Sie das Problem der Selbstinkrementierung des int-Primärschlüssels von MySQL

js implementiert Axios Limit-Anforderungswarteschlange

Zusammenfassung der 7 Fallstricke bei der Verwendung von React

Detaillierte grafische Beschreibung des Datenbankinstallationsprozesses der MySQL-Version 5.7.24

MySQL5.7.27-winx64 Version Win10 Download- und Installations-Tutorial-Diagramm

So verwenden Sie Docker zum Erstellen einer Entwicklungsumgebung (Windows und Mac)

MySQL-FAQ-Serie: Wann werden temporäre Tabellen verwendet?