KS Webdesign - Der Blog

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 Schluß 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.