Best Practice für CSS Clear oder Overflow [geschlossen]
Besprechen Sie mit einem Mitarbeiter, was mit CSS Clear / Overflow am besten ist. Bitte schließen Sie einen von uns und erklären Sie, warum einer besser ist als der andere.
JOEL'S CODE (mit Überlauf):
%Vor%CHRIS 'CODE (mit clear):
%Vor%Beide machen dieses Bild:
Wer hat Recht? :)
6 Antworten
Wenn Sie in einer Situation sind, in der Sie immer wissen, was das nachfolgende Element sein wird, können Sie das Klartext anwenden: beide; Wert für dieses Element und gehen Sie über Ihr Geschäft. Das ist ideal, da es keine ausgefallenen Hacks und keine zusätzlichen Elemente benötigt, die es perfekt semantisch machen. Natürlich funktionieren die Dinge normalerweise nicht so und wir brauchen mehr Werkzeuge zum Entfernen von Floaten in unserer Toolbox.
overflow: hidden wird am besten verwendet, wenn Sie einen Container haben, der kleiner als der Inhalt ist; während clear: beide werden am besten verwendet, wenn Sie möchten, dass sich ein schwebender Container NICHT neben dem nächsten Container positioniert.
Wenn Sie sich Ihr rotes Quadratbeispiel ansehen, möchten Sie lieber clear als überlaufen, aber nicht so wie hier. vielleicht etwas mehr wie:
%Vor%Im Grunde bist du sowohl falsch als auch richtig. Joel verwendet den besseren HTML-Ansatz, aber Chris benutzt den richtigen CSS-Code, nur auf die falsche Art.
Hier ist ein Kompromiss:
CSS:
%Vor%HTML:
%Vor%Ich würde es so schreiben. CHRIS 'Code ist etwas, was ich nicht schreiben würde, sondern nur wegen der redundanten leeren DIVs.
Da das CSS in beiden Fällen hinsichtlich Komplexität und Wartbarkeit ungefähr gleich ist, gewinnt die Lösung mit einfacherem (und damit kleineren) HTML und Gesamtnutzlast. Es ist kein großer Unterschied, und mit der Komprimierung wird der wiederholte Code wahrscheinlich verschwinden, aber einfacher und kleiner ist immer besser, wenn alles andere gleich ist.
Was ist mit dem Micro-Clearfix ? Kein zusätzliches Markup, kein overflow: hidden; Clipping, Cross-Browser-Unterstützung für IE 6 +.
Meine persönliche Vorliebe ist die overflow:hidden -Technik. Ich denke, das liegt daran, dass das Floaten etwas eine Stilentscheidung ist. Um eine Klasse von clear in das Markup einzufügen, scheint mir das Hinzufügen von Stilinformationen in die Datenebene. Es ist ähnlich (aber nicht annähernd so schlimm) wie das Hinzufügen von Inline-CSS. (Tatsächlich, wenn Sie darüber nachdenken, können Sie auch style="clear:both" zu dem div hinzufügen, dem Sie class="clear" hinzufügen möchten.)
Das ist natürlich meine persönliche Meinung. Ich behaupte nicht, dass einer besser ist als der andere. Aber ich habe sehr selten ein Problem mit overflow:hidden gefunden.