Mit Clearing habe ich als Float-Lover ja eher selten Problem, wenn ich in meinem Stylesheet bzw. meiner XHTML-Struktur denn mal ein Clearing benötige, dann habe ich dass ganz easy über <br class="c" />, wobei die Klasse c hier für clear:both steht, gelöst.
Das ist von der Semantik her vielleicht nicht ganz so schick, jedoch dafür mit allen Browsern funktionell, simpel und schlank im Quelltext.
Ich persönlich werde diese Lösung wohl auch noch weiter verwenden, bzw. werde bei festen Layouts auch weiterhin auf eine Umgebung aus gefloateten Elementen setzen, etwas besseres und kompatibleres gibt es für mich derzeit einfach nicht :)
Wer jedoch wirklich 100% semantischen Quelltext will, der kommt oft um eine Lösung ohne zusätzliches Markup nicht herum.
Für all diese CSS-Fanatiker hat Robert Nyman einmal die gängigsten Clearing-Methoden zusammengefasst. Mit Codebeispielen, Demos und den Nachteilen der jeweiligen Technik.
Ein guter Überblick wie ich finden,den man auf jeden Fall einmal gelesen haben sollte.
Kommentare zum Thema CSS-Clearing ohne Markup:
Ja, da gebe ich dir recht. Die Methode scheidet aus diesem Grund bei vielen Anwendungen auch aus.
Dein Tipp mit dem Display:none ist allerdings etwas seltsam, denn mit display:none ist doch auch das clearing fürn Poo, oder? Ich dachte immer das Elemente mit display:none alle Eigenschaften auf andere Objekte verlieren. Meinst du vielleicht visibility:hidden ? Auch ein padding:0; und margin:0; helfen im IE da glaube ich nicht, der hat mir bisher trotzdem immer ne Line ausgegeben, wenn man die natürlich im IE auch noch abschalten könnte wärs sicherlich ne gute Methode….
P.s.: Ich habe leider die letzten 2 Wochen keine Mails erhalten wenn ein Kommentar eingegangen is, deshalb hats bei den älteren Beiträgen jetzt etwas gedauert…iam so sorry ;(
nein, ich meinte tatsächlich display:none. das clearing funktioniert damit auch wunderbar (probiers aus!).
visibility:hidden macht einfach nur das element unsichtbar, der normalerweise benötigte platz wird aber trotzdem auf der seite freigehalten. display:none bewirkt, dass das element so behandelt wird, als sei es nicht vorhanden, es wird also an der stelle im dokument auch kein platz beansprucht.
so gesehen haste recht, das clearing sollte schon von der logik her dann gar nicht greifen. klappt aber… ;)
mich ärgert auch, dass man im IE trotz deklaration von margin:0 trotzdem abstände erhält. ich nutz diese methode trotzdem meistens zum clearen (werde aber auch dene methode mal testen bei gelegenheit). ein netter vorteil nämlich: bei “abgeschaltetem” CSS wird eine saubere trennlinie angezeigt, die zB content und teaser fein säuberlich auch optisch trennt.
Mhm, habs gerade mal ausprobiert…klappt bei mir nicht.
Also ich hab nen normales div mit Text drin, und im Text nen seperaten Textblock der n float:right hat, aber sobald ich (egal ob br oder hr) auf display:none; schalte, ist das clearing fürn Poo.
Hast du mal ne Seite parat wo du es so angewandt hast? Vielleicht hab ich ja irgendwas vergessen…
Aso, wenn mann mit arbeitet, sollte man der Klasse zudem noch n line-height: 0; margin:0; padding: 0; und height:0; verpassen.
I know, is nich wirklich semantisch…aber am simpelsten…und ich glaube das bisschen Absatz zuviel geht noch durch, auf Gunsten der Kompatibilität.
Richtig, mit line-height:0 und height:0 mach ich das aus. im body habe ich eh margin und padding auf 0 gesetzt.
Ist eine nette Methode um zu clearen.
Kommentar-Feed für diesen Artikel
Kommentarfunktion für diesen Artikel geschlossen.
eine schöne möglichkeit ist übrigens auch der einsatz von horizontalen linien als clearer!
diese werden dann auf display:none gesetzt, so dass sie im browser nicht sichtbar sind.
mir ist es bisher allerdings nicht gelungen, die abstände, die diese linie trotz verbergen erzeugt, in allen browsern anzugleichen. IE setzt leider größere abstände als FF und opera. wenns nicht auf pixelgenauigkeit ankommt, ist das nicht so tragisch, aber sonst stört das leider etwas