简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS-Floating-Reinigung, verwenden Sie nicht den Austausch „clear:both tag_Experience'.

WBOY
Freigeben： 2016-05-16 12:05:25
Original
1387 Leute haben es durchsucht

Zum Beispiel:
                                                                                 40px;background:#EEE; "> Einige Inhalte


"

Wenn wir uns diesen Code jetzt ansehen, werden wir feststellen, dass das äußerste übergeordnete Element Float-Container, wird nicht angezeigt. Dies liegt daran, dass das untergeordnete Element schwebend ist und vom Dokumentfluss abweicht, wodurch die Höhe des übergeordneten Elements Null wird.
Wenn Sie den Code wie folgt ändern:
                                                                                                                         width:30%; height:40px;background:#EEE; ">Some Content

;
Beachten Sie, dass es einen zusätzlichen Teil gibt Code zum Bereinigen von Floats. Dies ist eine gute CSS-Codierungspraxis, aber dieser Ansatz fügt nutzlose Elemente hinzu. Hier ist eine bessere Möglichkeit: Ändern Sie den HTML-Code wie folgt:
div style="float:left; width:30%; height:40px;background:#EEE; ">Einige Inhalte
Steuerelement „Float Cleanup“:




Code kopieren

Der Code lautet wie folgt: .clearfix:after {} { content: "."; klar: beide; Höhe: versteckt; Anzeige: Block
} /* Dies ist für Firefox-Verarbeitung, da Firefox generierte Elemente unterstützt, aber nicht alle Versionen von IE unterstützt generierte Elemente */
.clearfix {}{
display: inline-block Vom Browser durchgeführte Verarbeitung */
/**//* Versteckt vor IE-mac */
* html .clearfix {}{ height: 1%;} /* Dies ist die Verarbeitung, die im IE-Browser unter Win ausgeführt wird */
.clearfix {}{display: block;} /* Dies ist eine Änderung an display: inline-block;, zurückgesetzt auf Blockelement*/
/**//* End hide from IE-mac */


Wenn Sie zu diesem Zeitpunkt eine Vorschau des obigen Codes anzeigen (diesen Kommentar löschen), werden Sie feststellen, dass dies auch dann der Fall ist, wenn das untergeordnete Element vorhanden ist Floated, der Float-Container des übergeordneten Elements umgibt es weiterhin und führt eine Höhenanpassung durch.
Verwandte Etiketten：
CSS，浮动清理，clear:both
Quelle：php.cn
Vorheriger Artikel：Implementierungscode für die CSS-Textabfangfunktion Nächster Artikel：Das Textfeld CSS schließt die Eingabemethode_Erfahrungsaustausch
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
2
1513
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
10
1678
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1421
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1350
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1401
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！