clearfix Reloaded + overflow: hidden Demystified »Yahoo! User Interface Blog (YUIBlog)

clearfix Reloaded + overflow: hidden Demystified

27. September 2010 um 06.27 Uhr von Thierry Koblentz | In CSS 101 | 12 Kommentare

Über den Autor: Thierry Koblentz ist ein Front-End-Engineer bei Yahoo!
Er besitzt TJK Design- und ez-css.org . Sie können Thierry auf Twitter unter @ thierrykoblentz .

clearfix und overflow : hidden können die beiden beliebtesten Techniken, um Schwimmern ohne strukturelle Auszeichnung verdeutlicht werden.

Dieser kurze Artikel ist über die Verbesserung der ersten Methode und Shedding etwas Licht auf die wahre Bedeutung des zweiten.

clearfix

In allem, was Sie wissen über clearfix falsch ist , erkläre ich die Probleme dieser Methode erstellt wird in allen Browsern und ich schlage vor, um nur clearfix auf Elemente, die nicht neben Schwimmern (zB ein modales Fenster), obwohl als Autoren müssen wir noch mit zusammenbrechenden Gewinnspannen umgehen . Diese Demo-Seite zeigt das Problem.

Margin-Zusammenbruch Verhalten in den ersten beiden Boxen zeigt, dass es die erzeugte (nicht leere) Inhalte, die den unteren Rand in der Kiste (das macht absolut Sinn hält es nach Spec ).

So erstellen die gleiche Box-Layout in allen Browsern haben wir die ursprüngliche Methode durch die Generierung der Inhalte mit Pseudo-Elemente verbessern können :before und :after :

  . Clearfix: vor,
 . Clearfix: after {
   Inhalt:; "."    
   display: block;    
   Höhe: 0;    
   overflow: hidden;	
 }
 . Clearfix: after {clear: both;}
 . Clearfix {zoom: 1;} / * IE <8 * /

Sie nicht einfach ersetzen Ihre clearfix Regeln mit diesen neue in bestehende Projekte, obwohl, wie Sie bereits gepatchte Fragen im Zusammenhang mit einstürzenden Margen über andere Methoden haben kann.

`overflow`

In den meisten Diskussionen über die Lichtung schwebt das overflow:hidden Methode kommt, und es wird immer nach unten durch einen "Schuss platzieren Wenn Sie absolut positionierten Elementen innerhalb des div wollen, werden Sie das Abschneiden diese Elemente ". Aber das ist nicht notwendig wahr ist. overflow:hidden wird immer Clip relativ positionierten Elementen, aber es wird nicht immer verbergen absolut positionierten diejenigen. Denn es hängt alles von der Container-Block:

10.1 Definition von "containing block":

4. Wenn für das Element 'position: absolute', der umschließende Block wird von der nächsten Vorfahren mit einer etablierten 'position' der 'absoluten', 'relativ' oder 'fixed', ...

Dies bedeutet, absolut positionierten Elementen wird außerhalb einer Box mit gestylt zeigen overflow:hidden es sei denn, ihre Container-Block ist die Box selbst oder ein Element innerhalb der genannten Schachtel.

Sie können überprüfen, diese Demo-Seite zu sehen, wie die Dinge funktionieren.

Bessere Alternativen

Wenn Sie eine Breite für das Element enthält, schwimmt kann sich bewerben, dann ist die beste Option zu verwenden:

  display: inline-block;
 Breite: <any explizite Wert>;

Weiterführende Literatur

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

12 Kommentare

Vielen Dank für das overflow: hidden Entmystifizierung. Ich neige dazu, Überlauf verwenden: versteckt als Standard-"clearfix" Lösung, aber manchmal musste ich noch einen holen (oder ich dachte, ich musste), weil der Elemente absolut außerhalb der Box positioniert. Jetzt weiß ich, es ist subtiler als ich dachte.
display: table funktioniert auch, aber dann können Sie nicht verwenden position: relative auf dieses Element.
Kommentar von Florent V. - 27. September 2010 #
Dies ist ein guter Punkt. Ich bin sicher, viele Leute, die über Display sind: Tisch-oder display: table-cell sind sich nicht bewusst von dieser Einschränkung.
Vielen Dank für Ihr Feedback.
Kommentar von Thierry Koblentz - 28. September 2010 #
Gibt es in Ihrem "Bessere Alternative 'Werke in IE6, IE7, IE8?
Kommentar von Jorge Epuñan - 30. September 2010 #
@ Jorge
Ja, es funktioniert, es funktioniert tatsächlich in IE 5.0 +
Die Logik ist, dass im IE 5,6,7 die explizite Breite hasLayout auslöst, während "inline-block" erzeugt eine Block-Formatierung Kontext, in IE 8 und anderen modernen Browsern.
Die Breite ist der Schlüssel, um die Dinge auf der ganzen Linie aber funktionieren, da Boxen als "inline-block" shrink-wrap gestylt.
Deshalb ist der Artikel sagt: "Wenn Sie können eine Breite für das Element enthält, schwimmt gelten ..."
Kommentar von Thierry Koblentz - 1. Oktober 2010 #
Um mit der Verwendung von Displays gespielt: inline-block & Breite, aber ich fand einige Fehler.
Wenn es einen Zwischenraum zwischen den divs wird als ein Raum zwischen den divs zeigten werden.
Die vertikale Ausrichtung ist eine Hölle. @ Thierry wie wollen Sie es verwenden?
Werfen Sie einen Blick auf meinen Versuch hier http://jsfiddle.net/UZr7L/
Kommentar von Michael Lajlev - 10. Oktober 2010 #
@ Michael
Ich verwende es nicht an Elementen, die Geschwister (zumindest nicht für Layout) sind, aber beachten Sie, dass das, was du erfährst, keine Fehler sind.
YUI 3 befasst sich mit Grid dies durch den Einsatz letter-spacing und word-spacing (negative Werte).
Kommentar von Thierry Koblentz - 11. Oktober 2010 #
Nach diesem Kommentar über verderbliche Presse , bemerkte ich, dass ich einen Tippfehler hatte dort also habe ich die Herrschaft clearfix aktualisiert oben.
Im Gegensatz zu anderen Methoden, verwendet es overflow: hidden, nicht visibility: hidden.
Dank Darren für die Anhebung der Frage :)
Kommentar von Thierry Koblentz - 22. Oktober 2010 #
Offenbar mit content: "020" für die clearfix ist noch besser
Kommentar von unwiredbrain - 28. Oktober 2010 #
Autsch! WordPress gekaut meinen Code!
Es war content: " backslash zero zero two zero "
Kommentar von unwiredbrain - 28. Oktober 2010 #
@ Unwiredbrain
Sie sind mit einer Technik, die "visibility: hidden" verwendet bezieht, aber was ich verwende, ist "overflow: hidden" so sollte es keinen Unterschied machen.
Danke für euer Feedback
Kommentar von Thierry Koblentz - 28. Oktober 2010 #
Oh. Ich muss die beiden verwechselt haben. Sorry dafür.
Kommentar von unwiredbrain - 28. Oktober 2010 #
Meisterhaft. Ich benutze dies bei jedem Projekt nun als Teil der HTML5 Boilerplate. Ich benutze nicht alle der Textvorschlag aus, aber. Clearfix man immer gebrauchen. Vielen Dank!
Kommentar von YJ - 10. Mai 2011 #

Leider ist die Kommentarfunktion zu diesem Zeitpunkt geschlossen.

Präsentiert von WordPress auf Yahoo! Web Hosting .

Yahoo! User Interface Blog (YUIBlog)