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
Deaktivierte Werte, die nicht eingegeben werden können, können nicht an die Aktionsebene übergeben werden
Wenn ich das Formular eingabeunfähig machen möchte...
ElementUI implementiert Beispielcode für Dropdown-Optionen und Mehrfachauswahlfelder
Inhaltsverzeichnis Dropdown-Feld zur Mehrfachausw...
Detaillierte Erklärung, wie Node.js mit ES6-Modulen umgeht
Inhaltsverzeichnis 1. Unterschiede zwischen den b...
So ändern Sie die Kodierung der MySQL-Datenbank in utf8mb4
Die utf8mb4-Kodierung ist eine Obermenge der utf8...
Tutorial-Diagramm zur VMware-Installation des Centos8-Systems (Befehlszeilenmodus)
Inhaltsverzeichnis 1. Software- und Systemabbild ...
Schritte zur Bereitstellungsmethode für Docker Stack für Webcluster
Docker wird immer ausgereifter und seine Funktion...
Zusammenfassung gängiger Toolbeispiele in MySQL (empfohlen)
Vorwort Dieser Artikel stellt hauptsächlich die r...
MySQL-Optimierungszusammenfassung – Gesamtzahl der Abfrageeinträge
1. COUNT(*) und COUNT(COL) COUNT(*) führt normale...
Implementierung interaktiver Daten zwischen QT und Javascript
1. Daten fließen von QT zu JS 1. QT ruft die JS-F...
Detailliertes Beispiel einer MySQL-Austauschpartition
Detailliertes Beispiel einer MySQL-Austauschparti...
Zusammenfassung der Befehle zur Benutzerverwaltung im Linux-System
Benutzer- und Gruppenverwaltung 1. Grundlegende K...
Anwendungshandbuch für chinesische WEB-Schriftarten
Die Verwendung von Schriftarten im Web ist sowohl ...
Flex-Layout erreicht feste Anzahl von Zeilen pro Zeile + adaptives Layout
Dieser Artikel stellt das Flex-Layout vor, um ein...
So verwenden Sie MySQL, um die Datengenerierung in Excel abzuschließen
Excel ist das am häufigsten verwendete Tool zur D...
Informationen zu Problemen bei der automatischen Bereitstellung von Jenkins + Docker + ASP.NET Core (Fallstricke vermeiden)
Ich hatte nicht vor, diesen Blog zu schreiben, ab...