Ist Clearfix angesichts von „overflow: versteckt' veraltet?

Ist Clearfix veraltet?

Das uralte Dilemma bei Behältern mit schwebenden Kindern besteht weiterhin: Wie kann sichergestellt werden, dass sie ihre Höhe angemessen vergrößern? Während Clearfix, eine CSS-Optimierung, traditionell diesem Zweck diente, hat sich eine einfachere Lösung herauskristallisiert: overflow:hidden. Beide Techniken zeichnen sich durch eine hervorragende Browserkompatibilität aus, was die Frage aufwirft: Ist Clearfix jetzt überflüssig?

Vorteil von Overflow: Hidden

Im Allgemeinen bewältigt Overflow: Hidden die meisten Clearfix-Szenarien effektiv. Es gibt jedoch einige Ausnahmen.

Horizontaler Überlauf mit vertikaler Eindämmung

Stellen Sie sich ein Container-Div mit fester Höhe und horizontal überlaufenden schwebenden Elementen vor. „Overflow: Hidden“ löst das Problem der vertikalen Eindämmung nicht und erfordert eine alternative Float-Löschmethode, z. B. „clear: Both“ oder die Klasse „clearfix“.

Beispiel für einen Überlaufcontainer

Außerdem , Overflow: Hidden stellt in bestimmten Szenarien Herausforderungen dar. Nehmen Sie das Beispiel unter http://fordinteractive.com/misc/overflow/. Während der Überlauf in einigen Fällen funktioniert, schlägt er in anderen fehl. Alternative Lösungen wie display: inline-block können diese Probleme eleganter lösen, wie in http://jsbin.com/ubapog gezeigt.

Fazit

Während overflow:hidden in vielen Szenarien für das Float-Clearing an Bedeutung gewonnen hat, handelt es sich nicht um eine universelle Lösung. Für Ausnahmen wie horizontalen Überlauf mit vertikaler Eindämmung bleiben Clearfix oder andere Float-Clearing-Techniken wertvolle Werkzeuge im Arsenal eines Webentwicklers.

Das obige ist der detaillierte Inhalt vonIst Clearfix angesichts von „overflow: versteckt' veraltet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!