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! |
<<: Zusammenfassung der Methode von React zum Erstellen von Komponenten
>>: So zeigen Sie die IP-Adresse von Linux in einer virtuellen VMware-Maschine an
Artikel empfehlen
Zusammenfassung der Fallstricke bei der Installation von MySQL und MySQLClient auf CentOS7
1. MySQL Yum-Repository hinzufügen Offizielle MyS...
Verwenden Sie das Docker-Buildkit, um ein Docker-Image zu erstellen, das auf dem Raspberry Pi verwendet werden kann
Docker-Installation curl -fsSL https://get.docker...
Detaillierte Erläuterung des Docker-Arbeitsmodus und -Prinzips
Wie in der folgenden Abbildung dargestellt: Wenn ...
Vue implementiert den Operationscode zum Klicken auf eine Schaltfläche zum Herunterladen einer Datei (Backend-Java).
Im vorherigen Artikel habe ich die Funktion von V...
Detaillierte Erklärung, wie Sie den Speicherverbrauch in MySql reduzieren können
Vorwort Standardmäßig initialisiert MySQL einen g...
Verstehen Sie das Prinzip des Seitenersetzungsalgorithmus anhand von Codebeispielen
Algorithmus zum Ersetzen von Seiten: Das Wesentli...
Interpretation des CocosCreator-Quellcodes: Engine-Start und Hauptschleife
Inhaltsverzeichnis Vorwort Vorbereitung Gehen! Te...
MySQL Order By-Codebeispiel für Sortierregeln für mehrere Felder
Sag es im Voraus Aus einer Laune heraus möchte ic...
Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfiguration unter Linux
Angenommen, es gibt zwei Linux-Server A und B, un...
Neue Funktionen von JS ES: Einführung in Erweiterungsoperatoren
1. Spread-Operator Der Spread-Operator besteht au...
Einfache Methode zur Installation von MySQL unter Linux
Bei der Onlinesuche nach Methoden zur Installatio...
jQuery-Plugin zum Erreichen einer Bildunterbrechung
In diesem Artikel wird der spezifische Code des j...
Hauptfunktionen von InnoDB - Cache einfügen, zweimal schreiben, adaptive Hash-Indexdetails
Zu den wichtigsten Funktionen der InnoDB-Speicher...
Detaillierte Erläuterung der praktischen Anwendung des HTML-Tabellenlayouts
Wann wird die Tabelle eingesetzt? Tabellen werden...
jQuery implementiert dynamische Tag-Ereignisse
In diesem Artikel wird der spezifische Code von j...