CSS Clear Float Clear:Both Beispielcode
|
Heute werde ich mit Ihnen über das Löschen von Floats sprechen. Bevor ich über das Löschen von Floats spreche, müssen Sie verstehen, was Floats sind. Ich werde Ihnen hier keine detaillierte Einführung in Floats geben.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
.Kasten{
Breite: 1000px;
Rand: 0 automatisch;
Rand: 8px tief schwarz;
}
.box::nach{
Inhalt: "";
klar: beides;
Anzeige: Block;
}
.box .links{
Breite: 50%;
Höhe: 300px;
Hintergrundfarbe: rot;
schweben: links;
}
.box .rechts{
Breite: 50%;
Höhe: 300px;
Hintergrundfarbe: blau;
schweben: rechts;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<div Klasse="links"></div>
<div Klasse="rechts"></div>
</div>
</body>
</html>
Hier können wir sehen, dass bei Verwendung der schwebenden Funktion die Breite und Höhe des übergeordneten Elements nicht durch das untergeordnete Element gestreckt werden kann und das Layout daher anders ausfällt als Sie es sich vorgestellt haben. Hier gibt es viele Lösungen. Der Erste: Fügen Sie dem übergeordneten Element ein Div hinzu und löschen Sie den Float für das hinzugefügte Div.
<div Klasse="klar"></div>
klar{
klar: beides;
}Zweiter Typ: Wir können die Höhe des übergeordneten Div festlegen, was ebenfalls möglich ist.
.Kasten{
Breite: 1000px;
Höhe: 300px;
Rand: 0 automatisch;
Rand: 8px tief schwarz;
}Der dritte Wir können dem übergeordneten Element das Attribut overflow:hidden; hinzufügen. Das funktioniert auch.
.Kasten{
Überlauf: versteckt;
Breite: 1000px;
Rand: 0 automatisch;
Rand: 8px tief schwarz;
}Der vierte Wir können die Position „absolute“ oder „display: inline-block“ verwenden, um das Schweben zu löschen.
.Kasten{
/* Position: absolut; */
Anzeige: Inline-Block;
Breite: 1000px;
Rand: 0 automatisch;
Rand: 8px tief schwarz;
}Eigentlich reicht es aus, die anderen vier Typen zu kennen, aber Sie müssen wissen, wie man den fünften Typ verwendet. Die anderen vier Typen können schwebende Elemente löschen, aber sie verursachen unnötige Probleme. Nehmen wir den zweiten Typ als Beispiel. Wenn das übergeordnete Element später untergeordnete Elemente hinzufügen muss, müssen wir auch die Höhe des übergeordneten Elements ändern, was eine Menge Probleme verursacht. Der fünfte Typ ist auch der praktischste. Der fünfte Verwenden Sie Pseudoelemente, um Floats zu löschen. Wir können dem übergeordneten Element Pseudoelemente hinzufügen.
.box::nach{
Inhalt: "";
klar: beides;
Anzeige: Block;
}Dies ist das Ende dieses Artikels über den Beispielcode von CSS clear float clear:both. Weitere verwandte CSS clear both-Löschinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder weiter unten in den verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: JS verwendet Clip-Pfad, um eine dynamische Bereichs-Clipping-Funktion zu implementieren
>>: Installation und Konfiguration des automatischen Mount-Dienstes AutoFs im Linux-System
Artikel empfehlen
Analyse der Probleme und Lösungen für wiederholte Übermittlung, wiederholte Aktualisierung und Backoff-Verhinderung
eins. Vorwort <br />Sie werden diese Art von...
CSS3 Flexible Box Flex, um ein dreispaltiges Layout zu erreichen
Wie der Titel schon sagt: Die Höhe ist bekannt, d...
Die Einhandregel von WEB 2.0
<br />Mein vorheriger Artikel über CSS wurde...
JavaScript implementiert die H5-Goldmünzenfunktion (Beispielcode)
Heute habe ich eine Aktivität für einen roten Ums...
Das schnellste Textsuchtool von Linux: ripgrep (die beste Alternative zu grep)
Vorwort Apropos Textsuchtools: Jeder sollte grep ...
Detaillierte Erläuterung verschiedener Möglichkeiten zur Installation von CMake unter Ubuntu
apt installiere CMake sudo apt installiere cmake ...
Detaillierte Erklärung zur Verwendung des Arguments-Objekts in JavaScript
Inhaltsverzeichnis Vorwort Grundlegende Konzepte ...
Über die Position des H1-Tags in XHTML
In letzter Zeit wurde viel über H1 diskutiert (auf...
Detaillierte Erklärung der Linux-CPU-Last und CPU-Auslastung
CPU-Last und CPU-Auslastung Beides kann bis zu ei...
18 Killer-JavaScript-Einzeiler
Vorwort JavaScript erfreut sich weiterhin wachsen...
Docker-Bereitstellung von Implementierungsschritten für Flask-Anwendungen
1. Zweck Schreiben Sie lokal eine Flask-Anwendung...
Vue3 Vue-Ereignisbehandlungshandbuch
Inhaltsverzeichnis 1. Grundlegende Ereignisbehand...
Detaillierte Erläuterung der drei Möglichkeiten zum Konfigurieren virtueller Nginx-Hosts (basierend auf Ports)
Nginx unterstützt drei Möglichkeiten zum Konfigur...
So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus
Neulich habe ich rsync verwendet, um eine große D...
So drücken Sie relative Pfade in Linux aus
Wenn Ihr aktueller Pfad beispielsweise /var/log i...