Cleverer Clearfix löst das CSS-Floating-Problem

Wie man das CSS-Floating-Problem löst, sollte eine Frage sein, die viele Front-End-Entwickler beschäftigt. Ist es tatsächlich Clear oder Clearfix? -End-Mitarbeiter, wir müssen gründlich recherchieren und diskutieren ...

Universeller Float-Verschluss, ich habe erfahren, dass viele Freunde die folgende allgemeine Lösung verwenden:

clear{clear:both; height:0;overflow:hidden;}

Die Berufungsmethode besteht darin, ein div.clear oder br.clear an der Stelle hinzuzufügen, an der der Float gelöscht werden muss. Wir wissen, dass dies das grundlegende Float-Clearing-Problem lösen kann. Der größte Fehler dieser Methode besteht jedoch darin, dass sie die HTML-Struktur ändert, obwohl nur ein Div hinzugefügt wird.

Die optimale schwebende Verschlusslösung (das empfehlen wir):

clearfix:after{content:".";display:block;height:0;clear :both;visibility:hidden}

clearfix{*+height:1%;}

Die Verwendung ist sehr einfach, im übergeordneten Element von das schwebende Element Fügen Sie class="clearfix" zum Cloud-Element hinzu. Sie werden feststellen, dass diese Methode auch einen Nachteil hat, aber es handelt sich tatsächlich um ein kleines Problem. Es ist in Ordnung, die CSS-Schreibmethode zu ändern:

clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

clearfix{*+height:1%;}

Die obige Schreibmethode vermeidet eine Änderung der HTML-Struktur und löst sie direkt mit CSS.
Eine sehr beeindruckende Floating-Closing-Methode:

clearfix{overflow:auto;_height:1%}

Diese Methode ist ein Artikel, den ich im Ausland gelesen habe. Die erhaltene Lösung im Artikel wurde getestet und hat sich als zufriedenstellend erwiesen. Es ist wirklich einfach und leistungsstark. Studierende, denen es gefällt, können diese Methode auch ausprobieren.

Diese Methode wird von Duanyou radom bereitgestellt und der Test bestanden:

clearfix{overflow:hidden;_zoom:1;}