Wer floatet muss auch clearen!
Diese Weisheit schlägt dem geneigten Anfänger rasch entgegen, wenn ihm bei seinen ersten Gehversuchen in der erlauchten Kunst des Webdesigns das Design aus dem Ruder gelaufen ist.
Okay, also clearen, bloß welche Methode??
Da sagt ja jeder was anderes.
Zu Anfang ein paar Merksätze dazu:
- Mit Clear wird das Umfließen von floatenden Elementen beendet
- Ein Element mit Clear ordnet sich unter dem gefloateten Element an, d.h. der normale Textfluß wird wiederhergestellt.
- Ein Element mit Clear direkt nach den Floats lässt umgebende Elemente die Floats einschließen.
- Ein oberer margin bei einem Clear bleibt meist unberücksichtigt
- Clear ist nur auf Blockelemente anwendbar die nicht absolut positioniert sind
Es gibt verschiedene Maßnahmen zum Clearen, wobei die meisten so ihre Favoriten haben.
Meiner Meinung nach sollte man das eher dynamisch entscheiden.
Ich habe eine kleine Prioritätenliste nach der ich mich richte, um das Clear einzubauen:
- Wenn ein nachfolgendes Element (z.B. Fußzeile) die Aufgabe des Clearens übernehmen kann, so nutze sie.
- Ein hardcodiertes clear in Form z.B. einer
<hr />, die die clear-Eigenschaft bekommt. Dieses clearende Element wird direkt nach dem letzten Float und unmittelbar vor dem Ende des die Floats umgebenden Containers in den Quelltext eingebaut. - Das Element welches die Floats umgibt in Verbindung mit einer Breite ebenfalls floaten lassen (set a float to fix a float!)
- Easy Clearing ohne zusätzliches Markup. Bitte auch Heikos Anmerkungen (Punkt 12.3!) dazu beachten.
Es gibt noch eine weitere, leider nicht besonders geeignete Methode um Floats einzuschließen, die einem immer wieder mal in diversen Foren entgegengetrötet wird:
Dem umgebenden Element die overflow-Eigenschaft ungleich overflow:visible; zuordnen, also overflow:auto/scroll/hidden;.
Ältere Firefox-Versionen, Netscape und auch alte Operas kommen damit überhaupt nicht gut zurecht.
Heiko hat dazu einen Testcase gebaut, den ihr euch anschauen solltet.
Man sollte auch nicht vergessen das die overflow-Eigenschaft in der Spezifikation nicht präzise genug definiert ist, was auch in modernen Browsern immer mal gerne zu überraschenden Fehldarstellungen führen kann.
Deshalb sollte man diese Eigenschaft generell nur mit Bedacht und nach ausgiebigem Testen verwenden.
Zum Schluss noch dieses:
- Lokale Wirkung von Clear
- Globale Wirkung von Clear
Das Clear wirkt lokal wenn es für ein floatendes Element definiert wird, das in einem gefloateten Container hockt, d.h. das Clear gilt nur innerhalb der gefloateten Umgebung.
Wenn Clear für ein floatendes Element definiert wird, das in einem statischen Container hockt, gilt es für alle Floats auf der Seite. Das ist dann ein globales Clear.
Besonders das globale Clear sorgt gerne mal für unliebsame Überraschungen beim Erstellen einer Website.
Der klassische Fall ist der eines Zweispaltenlayouts, wo die linke Spalte floatet und die Rechte einen ausreichenden linken margin bekommt, damit sie neben dem Float zum Liegen kommt.
Deshalb hier mal ein kleines Beispiel für ein ungewolltes globales Clear:
Um dem ungewollten globalem Clear aus dem Weg zu gehen ist es das Beste die rechte Spalte auch floaten zu lassen.
Alternativ braucht die rechte Spalte noch einen inneren Container der Float in Verbindung mit einer Breite bekommt.
Pingback: Problem mit background eines container-divs
Hallo Klaus! Danke für die sehr aufschlussreiche Erklärung zum globalen Clear. Trotz der umfangreichen Erklärung scheine ich hier irgendwie einem gröberen Denkfehler aufzusitzen, für dessen Auflösung ich sehr dankbar wäre. Ich hab mir gerade eine Testumgebung gebastelt. Drei Div-boxen, die übereinander sitzen, wie es sich gehört. In der ersten Div-Box sitzt ein Bild, das nach links gefloatet ist, außerdem befindet sich ein Testtext darin, um die Auswirkung des Floatens zu sehen. In der zweiten Box befindet sich genau der gleiche Inhalt, außer dass das Bild nach rechts gefloatet ist. Beide Bilder ragen über den Rand der umgebenden Div-Box nach unten hinaus,wie es sich gehört.
So wie ich das verstehe, müsste, wenn ich in der dritten untersten Box ein clear: both; setze, dieses clear bewirken, dass laut Definition auch alle Floats, die sich oberhalb befinden, aufgelöst werden. Werden Sie aber nicht! Das clear wirkt nur auf die Box3. Ich wäre, wie gesagt, sehr dankbar, wenn mir jemand auf die Sprünge helfen könnte, denn so wies aussieht versteh ich hier einfach irgendwas total falsch.
Liebe Grüße Bernd
Hi,
sorry wenn ich erst jetzt antworte, aber die letzten beiden Wochen waren irgendwie Urlaub/Weihnachtsstress/usw.
Oben habe ich eine Prioritätenliste des Clearens gepostet.
Das mit dem Clear für ein nachfolgendes Element klappt nur wenn es das dem Float im Quelltext nachfolgende Element ist.
Bei deinem Testcase sitzt das floatende Element zusätzlich noch in einer div-Box.
In dem Fall mußt du in der div-Box Clearen oder die div-Box auch Floaten, damit die Floats vom umgebenden Element eingeschlossen werden.
Hättest du eine sidebar und einen Inhaltsbereich die beide Floaten, könntest du dem nachfolgenden div (footer) das Clear geben.
Pingback: Wiedermal floating - XHTMLforum
Pingback: Positionierung von div - XHTMLforum
Pingback: Aufbau meines CSS Codes... - Seite 2 - XHTMLforum