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

Analyse des Konfigurationsprozesses der Nginx-HTTP-Integritätsprüfung

Zusammenfassung der CSS-Methoden zum Löschen von Floats

Analyse des Konfigurationsprozesses der Nginx-HTTP-Integritätsprüfung

Eine kurze Diskussion über das Prinzip der Anmeldung durch Scannen von js-QR-Codes

HTML-Optimierung beschleunigt Webseiten

Erklärung der Funktionsweise und Verwendung von Redux

Kann Asynchronität in JavaScript „Await“ speichern?

Installationshandbuch für die MySQL 5.7.18-Version (einschließlich Binärdateiversion)

Vue.js implementiert Musikplayer

So stellen Sie mit Docker ein einfaches C/C++-Programm bereit

Problem der Inkonsistenz der MySQL-Multiplikations- und Divisionsgenauigkeit (vier Dezimalstellen nach der Division)

Artikel empfehlen

jQuery implementiert einen einfachen Popup-Fenstereffekt

Grafisches Tutorial (Fenster) zur Installation und Konfiguration von MySQL 5.7.21

Implementierung der ELK-Bereitstellungsmethode mit einem Klick in Docker Compose

Details und Beispielcode der MySQL-Replikationstabelle

Lösungen für das Problem der Tabellenschachtelung und Rahmenzusammenführung

Lösung für MySQLSyntaxErrorException beim Herstellen einer Verbindung zu MySQL über Bitronix

Detaillierte Erklärung zur Verwendung des Arguments-Objekts in JavaScript

Detaillierte Erläuterung der Wissenspunkte zur Echtzeitsicherung der MySQL-Datenbank

Detaillierte Erläuterung der offiziellen Gesichtsüberprüfung des WeChat Mini-Programms

Detaillierte Erläuterung der Angular-Datenbindung und ihrer Implementierung

Tutorial zum Konfigurieren und Verwenden des i3-Fenstermanagers unter Linux

Ein Beispiel für die Installation von MySQL unter Linux und die Konfiguration des externen Netzwerkzugriffs

Erstellen Sie in 5 Minuten einen WebRTC-Videochat

Sieben Prinzipien eines guten Designers (1): Schriftdesign

Lernbeispiel für den Nginx Reverse Proxy