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:

[php]
<div class="clear"></div>
[/php]

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

[php]
.clear {
clear: both;
}
[/php]

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:

[php]
<div class=“recent-posts clearfix“>Inhalte hier….</div>
[/php]

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

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

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:

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

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

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!