Kommentare 37

Hilfreiche CSS-Tipps: So bekommst du Floats in den Griff

Besonders bei komplexen Web-Layouts, oder wenn man noch nicht so viel Erfahrung im CSS-Styling sammeln konnte, bereitet einem die CSS-Eigenschaft “float” gerne einmal Probleme. Da rutschen Webseiten-Elemente ungewollt nach oben oder springen scheinbar unkontrolliert nach rechts und links. Da das Prinzip der Floats nicht ganz leicht zu verstehen ist, habe ich einige hilfreiche Tipps zum Umgang mit CSS-Floats zusammen gestellt.

1. Was sind CSS-Floats

Floating (engl. für Umfließen) bedeutet im CSS, dass ein Element sich entweder links oder rechts neben einem anderen Element anordnet, anstatt darunter (wie es standardmäßig der Fall ist). Die CSS-Eigenschaft für das Umfließen von Elementen definierst du in deinem CSS-Stylesheet mit float:left oder float:right (nach links oder rechts umfließen).

Weitere mögliche Float-Werte sind float:none (standard) und float:inherit. None bedeutet, dass dieses Element nicht floatet. Bei inherit übernimmt das Element den Float-Wert seines Parent-Elements (also des Elements, in dem es sich befindet).

CSS Floats erklaert

Das Umfließen von Elementen gibt es natürlich nicht nur auf Webseiten, sondern auch in den traditionellen Printmedien funktioniert das Prinzip ähnlich. So werden in einem Magazin-Layout beispielsweise Fotos von einem Text umflossen.

2. Wo kommen die Floats zum Einsatz

Für die Umsetzung deines Webdesign-Layouts in HTML und CSS benötigst du immer wieder floatende Elemente.

Ein typisches Beispiel ist das Umfließen von Text um ein Bild. Normalerweise würde der Text erst unterhalb des Bildes anfangen. Indem du deinem Bild die CSS-Eigenschaft float:left gibst, kann der darauffolgende Text um das Bild herum fließen.

CSS Floats erklaert

Mit dem gleichen Prinzip baust du auch den kompletten Aufbau deiner Webseite auf. Zum Beispiel kannst du so den Seiteninhalt deines Layouts links neben der Sidebar anordnen und nicht darunter.

CSS Floats erklaert

Doch nicht nur Text und ganze Webseiten-Elemente kannst du mit Floats anordnen. Auch Listen-Elemete, wie z.B. eine Artikel-Vorschau mit Vorschaubildern links neben der Artikel-Überschrift kannst du mit Hilfe von floatenden Elementen anlegen.

CSS Floats erklaert

Hier auf der Elmastudio-Webseite findest du diese Einsatz-Möglichkeit z.B. in der Vorschau weitere Artikel einer Tutorial-Serie.

3. Margin und Padding

Um zu bestimmen, welchen Abstand ein Element zum nächsten hat, kannst du dem Element die gewünschten Margin-Werte geben. Margin funktioniert also wie ein unsichtbarerer Puffer der verhindert, dass ein Element direkt an das nächste anliegt. In deinem CSS-Stylesheet gibst du also einem Element den Wert margin: 0px 30px 30px 0px wenn du möchtest, dass es rechts und unten einen Abstand von 30 Pixeln zu seinem Nachbarn hat. Die vier Margin-Werte zählst du also immer im Uhrzeigersinn.

Ein weitere Wert, der ebenfalls einen Abstand bestimmt, ist das padding. Maring und Padding können leicht verwechselt werden, da beide CSS-Eigenschaften auf den ersten Blick ähnliche Funktionen haben. Padding bestimmt aber, im Gegensatz zu den Margins, einen Abstand innerhalb eines Elements. Mit Padding kannst du so z.B. den Abstand von einem Div-Container zu dem, sich im Div-Container befindenden Text bestimmen. Hier auf der Elmastudio-Webseite hat der weiße Inhaltsbereich z.B. einen Padding-Wert von 30 Pixeln.

CSS Floats erklaert
Der Unterschied zwischen Margin und Padding bildlich erklärt.

4. Clearing Floats

Das größte Problem im Umgang mit CSS-Floats ist, dass an bestimmten Stellen des Layouts das Umfließen der Webseiten-Elemente nicht gewünscht ist.

Manchmal rutscht ein Div-Container z.B. ungewollt nach oben, obwohl man in im Layout unter dem vorherigen Element anlegen möchte.

CSS Floats erklaert

Das kann durch ein Clearing deiner Floats verhindern.

CSS Floats erklaert

Auch wenn alle Elemente in einem Parent-Element (z.B. alle Spalten in einem Footer) gefloatet sind, entsteht ein Problem im Layout. Das Parent-Element kollabiert, so dass die Child-Elemente nicht mehr wie gewünscht vom Parent-Element eingeschlossen werden, sondern darüber hinaus laufen.

CSS Floats erklaert
Ein Parent-Element mit ausschließlich gefloateten Child-Elementen kollabiert.

CSS Floats erklaert
Dies kann durch ein Clearing der Floats verhindert werden.

4.1. Verschiedene Lösungen, um Floating zu verhindern

Es gibt verschiedene CSS-Tricks, um das überflüssige Floating oder das Kollabieren des Parent-Elements zu verhindern.

Die CSS-Eigenschaft clear: both

Wenn die Situation entsteht, dass ein Element ungewünscht neben ein anders rutscht, kannst du diesem Element die CSS-Eigenschaft clear:both geben. Diese Methode funktioniert allerdings nur bei Elementen, die immer an der gleichen Stelle aufeinander folgen.

Ein leeres Div-Element

Alternativ kannst du in deinem HTML-Code ein leeres DIV-Element einfügen, um ein Floating an einer bestimmten Stelle zu verhindern. Das Element kann z.B. die CSS-Klasse clear haben:

<div class="clear"></div>

In deinem Stylesheet bestimmst du dann die Klasse .clear mit:

.clear {
clear: both;
}

Das zusätzliche Div-Element fügst du dann genau zwischen dem letzten Child-Element und dem Ende des Parent-Elements in deinen Code ein.

Die Methode ist ein wenig flexibler als die erste, da du so unabhängig von darauffolgenden Element, ein weiteres Floating verhindern kannst.

Overflow:hidden oder overflow: auto

Außerdem gibt es noch die Möglichkeit, für das Parent-Element die CSS-Eigenschaft overflow:hidden oder overflow:auto zu nutzen, um zu verhindern das dieses kollabiert. Du solltest bei diese Option allerdings vorsichtig sein, dass durch den Befehl nicht aus versehen Elemente innerhalb des Parent-Divs abgeschnitten werden. Dies kann besonders leicht passieren, wenn dein Parent-Div eine festgelegt Höhe hat. Dann kannst du die Overflow-Methode nicht verwenden.

Die EasyClearing-Methode

Eine weitere Option ist die EasyClearing oder Clearfix-Methode. Hier gibst du einem Parent-Div, das gefloatete Elemente enthält und diese nicht umschließt, die zusätzliche CSS-Klasse clearfix. Ein Parent-Div mit der CSS-Klasse recent-posts wird dann z.B. zu:

<div class=“recent-posts clearfix“>Inhalte hier....</div>

In deinem Stylesheet definierst du jetzt die CSS-Klasse clearfix mit dem CSS Pseudo-Element :after.

.clearfix:after {
content: ".";
display: block;
clear: both;
font-size: 0;
height: 0;
visibility: hidden;
} 

Damit die clearfix-Methode auch im Internet Explorer 6 und 7 funktioniert, musst du noch folgende zusätzliche Eigenschaften für die IE-Browser definieren:

/* IE-Patch für IE 7*/
*:first-child+html .clearfix { min-height: 0; }

/* IE-Patch für IE 6*/
* html .clearfix { height: 1%; }

Eine ausführliche Erklärung der Clearfix-Methode (in mehrere Abschnitte unterteilt) kannst du von Peter Müller auf little-boxes.de nachlesen.

Die clearfix hat den großen Vorteil, dass du auf diese Weise kein extra HTML-Code (wie z.B. beim leeren Div-Element) in dein Markup hinzu fügen musst.

Leider gibt es für das Vermeiden von Floats noch keine allgemein gültige, ideale Lösung. Es kommt immer auf die jeweilige Situation an, welche Methode sich am besten eignet. Eine der vier beschriebenen Optionen wird dir aber mit Sicherheit weiterhelfen, deine gefloateten Elemente in den Griff zu bekommen.

5. Hilfreiche Tipps für die Arbeit mit CSS-Floats

In der Theorie hört sich das Arbeiten mit Floats im CSS eigentlich viel komplizierter an, als es ist. Am besten du probierst die verschiedenen Möglichkeiten einfach an einem Beispiel aus. Hierzu kannst du folgende Tricks anwenden.

Vom groben ins Feine arbeiten

Um bei der Arbeit in deinem Layout nicht so leicht durcheinander zu kommen, solltest du immer vom Groben ins Feine arbeiten. Du legst also als erstes dein Seiten-Layout mit Hintergrund, Header-Element, Content, Sidebar und Footer an. Floaten diese Elemente alle wie gewünscht (inklusive der passenden Margin-Werte), kannst du Schritt für Schritt die weiteren Elemente in dein Layout einbauen.

Farbige Hintergrundfarben nutzen

Ein weitere Tipp ist es, den einzelnen Elementen während der Arbeit im CSS vorübergehend zusätzliche Hintergrund-Farben zuzuweisen. So hast du einen viel besseren Überblick, ob deine Elemente auch wirklich an der richtigen Stelle sitzen. Diese Vorgehensweise nutze ich auch sehr gerne, um einen Fehler im CSS schnell ausfindig zu machen.

Das Firefox Addon MeasureIt (gibt’s auch als Google Chrome Erweiterung) sind außerdem noch sehr hilfreiche Tools, um Abstände nachzumessen.

Firebug oder Google Chrome Developer Tools

Um die CSS-Styles und das HTML Markup im Browser kontrollieren zu können und so Fehler schnell ausfindig zu machen, sind das Firefox Addon Firebug oder die Google Chrome Developer Tools eine weitere große Hilfe.

Die Tools kannst du übrigens auch verwenden, um im Code anderer Webseiten mit ähnlichem Layout zu gucken, wie dort etwas gelöst wurde.

Tipps zum Weiterlesen

Hast du Fragen zu den CSS Floats oder kennst du weitere hilfreiche Tipps oder Blog-Artikel zum Thema? Über dein Feedback, sowie weitere Tipps und Tricks freue ich mich sehr!

37 Kommentare

  1. Paul

    Eine weitere Möglichkeit des Clearens gibt es mit der Easy-Clearing-Methode. Diese ist besonders hilfreich, wenn ein Div, wie im Artikel angesprochen, eine festgelegte Höhe haben muss, einige Kind-Elemente aber trotzdem daraus hinausragen sollen (z.B. Störer oder besondere Navigationselemente).

    Von leeren Divs oder clearenden br-Elemente im Html würde ich absehen, da deren semantischer Nutzern nicht gegeben und es nicht gerad der beste Stil ist. Schließlich kann man die clear-Klasse auch einfach dem folgenden Element mitgeben und muss dafür kein neues Element “erfinden” :)

    Ansonsten ein sehr umfassender und informativer Artikel, den ich gleich mal an meine Praktikanten weiterleiten werden, die tun sich immer noch etwas schwer mit den kollabierenden Elternelementen…
    *thumbs up* Vor allem der Hinweis auf die Hintergrundfarben ist sehr gut, da dadurch das ganze “greifbarer” wird.

    • Hallo Paul,

      vielen Dank für deinen Kommentar und die hilfreichen Ergänzungen zum Artikel. Ich habe deinen Hinweis gleich noch aufgenommen, und die EasyClearing-Methode im Artikel ergänzt. Vielen herzlichen Dank dafür :-)

      Es freut mich sehr, dass du den Artikel und die Tipps (z.B. zu den Hintergrund-Farben) hilfreich findest :-)

      Viele Grüße,
      Ellen

  2. Nach dem .clearfix hätte ich jetzt auch gefragt, vor allem um die von Paul schon angeprangerten leeren Elemente zu vermeiden. Je weniger Code, desto besser! ;-)

    Ansonsten: Danke für den Artikel, ich lege den morgen mal der Azubine vor. Da kann die mal was lernen.

    • Hallo Martin,

      vielen Dank für dein Feedback :-) Ja, die EasyClearing-Methode habe ich heute morgen gleich noch im Artikel ergänzt. Klar, das ist natürlich vollkommen richtig, dass man wenn möglich auf extra Code verzichten sollte :-)

      Vielen Dank für deine hilfreichen Tipps,
      und viele Grüße
      Ellen

  3. Dein Artikel über die CSS-Eigenschaft »float« gefällt mir sehr gut. Du hast hier sowohl für “Anfänger” als auch für “Fortgeschrittene” sehr anschaulich und leicht verständlich womöglich auftretende Probleme bei der Verwendung von Floats dargestellt.

    Ganz toll finde ich auch deinen Hinweis über den Einsatz von speziellen Hin­ter­grund­far­ben zur Fehlerermittlung in den CSS-Formatierungen.

    lg Franz

    • Hallo Franz,

      vielen Dank für dein positives Feedback, es freut mich, dass dir der Artikel so gut gefällt :-)

      Ja, ich selbst kann mir immer alles besser vorstellen, wenn ich es visuell vor mir habe. Daher arbeite ich immer gerne mit verschiedenen Hintergrund-Farben für meine Div-Elemente. So kann man Fehler viel leichter erkennen und kontrollieren, ob alle Elemente an der richtigen Stelle sitzen :-)

      Viele Grüße,
      Ellen

    • Hallo Paul,

      vielen Dank für dein nettes Feedback zum Artikel. Es freut mich, dass dir der Artikel gefällt :-) Ja, ich erinnere mich auch noch zu gut daran, dass ich immer mal wieder ganz gerne an den Floats verzweifelt bin ;-)

      Viele Grüße,
      Ellen

  4. Schöner Beitrag wobei ich bei meinen Projekten auch stets auf die Clearfix-Methode zurückgreife, weil etwas eleganter. Ein weiteres Problem besteht auch darin, das die clear:both-Elemente in bestimmten Situationen Probleme machen was die Vergabe von Margin-Top-Werten anbelangt. Auch hier funktioniert das Clearfix etwas besser. Ansonsten wie immer ein hilfreicher Artikel, und immer wieder schön, den Kolleginnen und Kollegen mal über die Schulter zu schauen :-) – so rostet man auch selbst weniger ein …

    • Hallo Markus,

      vielen Dank für dein positives Feedback zum Artikel und deine hilfreichen Ergänzungen. Die Clearfix-Methode habe ich bereits im Artikel ergänzt, vielen Dank für deinen Hinweis :-)

      Ja, auf die Problematik mit den Margin-Top Werten aufmerksam zu machen, ist auch hilfreich. Diesen Hinweis werde das auch noch im Artikel einfügen.

      Viele Grüße,
      Ellen

    • Hallo ad,

      danke für dein nettes Feedback, es freut uns sehr, dass dir die Beiträge so gut gefallen :-)

      Unsere Inspiration kommt eigentlich meist aus der täglichen Arbeit oder durch Fragen, die uns ab und zu per Mail erreichen. Ich finde es ist einfach toll, wenn man die eigenen Erfahrungen weitergeben kann, und somit anderen auch gleich weiterhilft :-)

      Viele Grüße,
      Ellen

  5. Klasse Artikel Ellen. Du hast es geschafft ein für viele nicht ganz so einfaches Thema wie floats verständlich und ohne viele Fachbegriffe darzustellen. Schön auch mal eine Variante für Normalsterbliche zu diesem Thema zu lesen. Weiter so.

  6. sehr guter artikel, den ich definitiv nochmals genauer lesen werde!

    nur bei dem beispiel-bild zum unterschied margin/padding stimmt die margin-angabe nicht (0, 30px, 0, 30px statt 0, 30px, 30px, 0), aber das nur am rande ;)

    vielen dank!

    • Hallo Claudio,

      vielen Dank für dein positives Feedback, es freut mich, dass dir der Artikel gefällt :-)

      Und vielen herzlichen Dank für den Hinweis zum Fehler im Margin/Padding-Bild. Ich habe es gleich korrigiert :-)

      Viele Grüße,
      Ellen

  7. Endlich mal eine vernünftige Erklärung des floats für Jung & Alt … So ein Artikel hätte ich mir, wie Paul, schon vor einigen Jahren gewünscht^^ Ich denke das hätte mir so einiges an Verzweiflung erspart …

    • Hallo Lars,

      vielen Dank für dein nettes Feedback. Das freut mich sehr, dass dir der Artikel gefallen hat und du findest, dass das Thema “Floats” verständlich erklärt ist :-) Ja, ich glaube auch, die lieben Floats haben jedem schon einmal Kopfzerbrechen bereitet ;-)

      Viele Grüße,
      Ellen

    • Hallo Phil,

      vielen Dank für deinen Kommentar und die hilfreichen Link-Tipps :-) Ich schaue mal, dass ich deine Tipps noch in den Artikel mit aufliste :-)

      Vielen herzlichen Dank und viele Grüße,
      Ellen

  8. Hallo Elmastudio,
    Ich kann mich dem allgemeinem Lob nur anschließen. Und ja, auch ich hätte diesen Artikel gerne früher schon zur Hand gehabt, das hätte mir manchen Ärger erspart ;-)
    Ich finde ihr hebt euch mit der Qualität die ihr hier liefert deutlich von anderen Seiten ab. Deshalb habe ich auch gerade einen Link auf ein Tutorial von euch gesetzt. Falls ihr euer gesammeltes Wissen mal in Buchform gießen solltet, werde ich es ganz fix bestellen und wahrscheinlich nicht nur ich…
    Gruß, Stefan

    • Hallo Stefan,

      vielen Dank für dein positives Feedback. Es freut mich, dass du dir der Beitrag gefallen hat und ich hoffe, das der Artikel zumindest der zukünftigen Generation von CSS-Fans weiter helfen kann :-)

      Es freut uns riesig, dass dir die Artikel hier auf dem Blog auch insgesamt so gut gefallen und vielen Dank, dass du das Tutorial weiter empfohlen hast. Hehe, ein Buch wäre sicher klasse, na ja, aber das Web hat ja doch auch viele Vorteile gegenüber traditionelleren Medien :-)

      Viele Grüße,
      Ellen

  9. Super Artikel, sehr anschaulich erklärt. Das meiste wusste ich schon, aber ich hab trotzdem weitergelesen, weil’s gut geschrieben war. ;) Und dann hab ich doch noch endlich gelernt wie man sich hier: margin: 0px 30px 30px 0px merken kann wo oben, unten, rechts und links ist. Haha. Im Uhrzeigersinn, mein Gott. Manchmal ist es doch so einfach! :)

    Liebe Grüße
    Nicole

  10. Silke und Michael Münnich

    Hallo Ellen,

    bin erleichtert Deinen Artikel gefunden zu haben.

    Seit 3-4 Wochen lerne ich CSS, angefangen mit dem Buch “Jetzt lerne ich CSS” von Markt und Technik, seit 2 Wochen mit “Little Boxes”. Ich musste feststellen, dass das Buch “Little Boxes” wesentlich besser aufgebaut ist als “Jetzt lerne ich CSS”.
    Nun ja, seit ein paar Tagen arbeite ich mit floats. Dieses Thema kann einen ganz schön durcheinander bringen. In Little Boxes sicherlich sehr ausführlich erklärt, aber dennoch zu viel Content für einen Neuling. Dank Deines Artikels habe ich nun verstanden um was es überhaupt geht.
    Dafür einen riesen Dank an Dich.

    L.G. Silke

  11. Hi Ellen,

    danke für diesen tollen Artikel.
    Clear: both; hat definitiv meinen Abend gerettet, denn ich dachte schon ich krieg das rübergerutschte Element nie wieder zurück. :)

    Jedes Mal wenn ich auf eurer Seite war hab ich das Gefühl nicht nur copy / paste Programmierung betrieben zu haben, sondern tatsächlich was gelernt zu haben.

    Danke für euren Einsatz und eure tollen Artikel.

    Manuel

  12. Malte

    Hi, vielen Dank für das ausführliche Tutorial :). Ich habe ein Problem, ist bestimmt ne kleinigkeit, aber ich bekomme es nicht in den Griff.

    Unter dem Punkt: 1. Was sind CSS-Floats
    Dort stehen3 Elemente nebeneinander mit Hilfe von floats. Jetzt ist es so, dass wenn ich den Browser mit “Strg + Mausrad” verkleiner die rechte box nach unter rutscht. Ich bekomme das einfach nicht in den Griff. Ich hoffe du hast eine Lösung parat :).

  13. Bettina

    Liebe Ellen, vielen Dank für den Floating-Artikel! – Genau das, was ich heute an diesem schneevermatschten Sonntag für meine Fragestellung gebraucht habe… Und generell seid Ihr eine große Hilfe. Lieber Gruß von einem frischen WordPress-Fan!

  14. Hallo Ellen,

    ich habe mit Hilfe von Floats Reihen von jeweils 3 DIVs mit unterschiedlichen (!) Höhen erstellt. Die nachfolgenden Reihen richten sich (natürlich) am höchsten DIV aus. Somit entstehen unterschiedlich große Lücken zwischen den Reihen. Ich hätte es eben gerne so, dass sich die Boxen an der obigen ausrichtet, egal wie hoch oder tief sie ist. Wie bekommt man dieses Problem in den Griff? :)

    Viele Grüße,
    Dennis

  15. Ich sitze grade an der Website des Filmbereichs meiner Hochschule, für die ich WordPress als CMS benutze. In den letzten Tagen bin ich dauernd wieder wegen irgend etwas hier auf der Seite gelandet.
    Das erste mal, dass ich mal bei einem Blog-Autor auf die Facebook-Seite gegangen bin und dann seh ich, dass wir die hfg, Heiner Blum und David Linderman als gemeinsame Freunde haben und du eine Ex-HfGlerin bist.
    Wie auch immer sehr hilfreicher Artikel, bastel schon ewig lang mit CSS rum, aber wusste bis heute nicht, dass ich mit overflow: hidden das kollabieren stoppen kann.
    Überhaupt sehr sehr viele nützliche Artikel und schöne Seite.

    Liebe Grüße aus Offenbach
    Marc

Schreibe eine Antwort