HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float

Im vorherigen Video-Training wurde das sogenannte Floating-Prinzip bereits kurz angerissen. Das Thema ist allerdings so komplex, dass hier noch einmal ein detaillierter Blick auf jenes Floaten geworfen wird. Denn tatsächlich handelt es sich dabei um ein entscheidendes Konzept in CSS. Denn nur, wenn man diese Thematik versteht, kann man tatsächlich Webseiten erstellen.
... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!
Ein erstes Beispiel soll diesen Aspekt verdeutlichen.
<p><img src="bild.jpg" /> In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>
Hier wurde ein Absatz definiert. Innerhalb dieses Absatzes befinden sich ein Bild und normaler Text.
Ein Blick auf das Ergebnis zeigt, dass das Bild im Textfluss steht.
float
-Eigenschaft ins Spiel.img { float: left;}
Auch hierzu wieder ein Blick auf das Ergebnis.
Hier wurde das Bild also gefloatet. Der Text fließt dadurch um das Bild herum.
float
kann man die Werte left
und right
zuweisen, um das Element nach links (float: left
) oder rechts (float: right
) "schweben" zu lassen.Ihr könnt auch gleich mal
float: right
auf das Bild anwenden.In diesem Fall passieren drei Dinge:
• Die Grafik wird aus dem normalen Fluss herausgenommen.
• Sie wandert im
p
-Element ganz nach oben.• Sie wird so weit wie möglich rechts angezeigt.
img { float: left; margin-right: 20px; }
Dem Bild wurde ein rechter Rand von 20 Pixel zugewiesen. Das ergibt folgenden Anblick:
Experimentiert hier einfach ein bisschen mit den Randabständen.
Das Floaten beenden
Noch einmal zurück zum Bildbeispiel. Ich erweitere die Syntax um einen zusätzlichen Textabsatz.<p><img src="bild.jpg" />In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p> <p>In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>
Das Ergebnis sieht so aus:
Wenn ihr euch das Ergebnis anseht, wird deutlich, dass die Grafik tatsächlich über den Absatz nach unten hinausgeht. Das ist in dieser Form natürlich nicht immer gewünscht. An diesem Punkt wird die
clear
-Eigenschaft interessant. Denn darüber lässt sich das Floaten beenden. clear
zwingt ein folgendes Element, tatsächlich unterhalb eines gefloateten Elements zu beginnen, und nicht etwa neben diesem. Die clear
-Eigenschaft kennt die folgenden Werte:•
left
– beendet float: left
•
right
– beendet float: right
•
both
– beendet sowohl float: right
als auch float: left
clear: left
zu, um das Floaten zu beenden.<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <style> img { float: left; margin-right: 20px; } </style> </head> <body> <p style="background-color:#CCFF66;"><img src="bild.jpg" />In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p> <p style="clear:left;">In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p> </body> </html>
Durch die gezeigte Syntax wird der zweite Absatz nun tatsächlich unterhalb des Bildes angezeigt.
In den meisten Fällen kann man übrigens anstelle von
clear: left
oder clear: right
gleich clear: both
nehmen. Daher empfiehlt es sich, in seinem Stylesheet einfach eine entsprechende Klasse anzulegen, die man dann bei Bedarf aufruft..clearing { clear: both; }
Diese Klasse könnt ihr immer dann verwenden, wenn das Floaten eines Elements beendet werden soll.
<p class="clearing">Inhalte ...</p>
Wozu das Floaten gut ist
Natürlich wird das Floaten nicht nur für den Textfluss im Zusammenhang mit Bildern benötigt. Tatsächlich bildet es das Grundkonzept CSS-basierter Webseiten. Denn dank dem Floaten lassen sich beispielsweise mehrspaltige Layouts ganz einfach umsetzen. Seht euch dazu folgendes Beispiel an:<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <style> #navi { float:left; width:12em; background-color:#99FFFF; } #inhalt { margin-left: 14em; background-color: #FF3333; } </style> </head> <body> <div id="navi"> <ul> <li>Startseite</li> <li>Kontakt</li> <li>Impressum</li> </ul> </div> <div id="inhalt"> Hier steht der Inhalt der Webseite. </div> </body> </html>
Und eben dieses Nebeneinanderstehen wird über das Floating-Konzept realisiert. Ausführliche Informationen zum Aufbau von Webseiten auf Basis des Floatens folgen im weiteren Verlauf dieser Reihe.
Weitere Teile
- Tutorial: HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.
- Tutorial: HTML & CSS für Einsteiger (Teil 02): Die erste HTML-Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 03): Elemente, Tags und Attribute
- Tutorial: HTML & CSS für Einsteiger (Teil 04): Texte strukturieren
- Tutorial: HTML & CSS für Einsteiger (Teil 05): Texte aufhübschen
- Tutorial: HTML & CSS für Einsteiger (Teil 06): Listen
- Tutorial: HTML & CSS für Einsteiger (Teil 07): Tabellen (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 08): Tabellen (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 09): Grafiken fürs Web (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 10): Grafiken fürs Web (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 11): Hyperlinks definieren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 12): Hyperlinks definieren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 13): Formulare (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 14): Formulare (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 15): Formulare (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 16): Formulare (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 17): Formulare (5)
- Tutorial: HTML & CSS für Einsteiger (Teil 18): Semantik fürs Web (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 19): Semantik fürs Web (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 21): Semantik fürs Web (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 23): Multimedia für die Webseite (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 24): iFrames
- Tutorial: HTML & CSS für Einsteiger (Teil 25): Das ist CSS
- Tutorial: HTML & CSS für Einsteiger (Teil 26): So klappt der Zugriff mit den Selektoren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 27): So klappt der Zugriff mit den Selektoren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 28): So klappt der Zugriff mit den Selektoren (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 29): Schöner Text durch CSS (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 30): Schöner Text durch CSS (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 31): Farben und Hintergründe
- Tutorial: HTML & CSS für Einsteiger (Teil 32): Außenabstände und Außenränder
- Tutorial: HTML & CSS für Einsteiger (Teil 33): Den Textfluss kontrollieren
- Tutorial: HTML & CSS für Einsteiger (Teil 34): Rahmen
- Tutorial: HTML & CSS für Einsteiger (Teil 35): Listen und Counter
- Tutorial: HTML & CSS für Einsteiger (Teil 36): Das Boxmodell
- Tutorial: HTML & CSS für Einsteiger (Teil 37): Elemente positionieren
- HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float
- Tutorial: HTML & CSS für Einsteiger (Teil 39): Die verschiedenen Layoutvarianten
- Tutorial: HTML & CSS für Einsteiger (Teil 40): Zwei- und dreispaltige Layouts
- Tutorial: HTML & CSS für Einsteiger (Teil 41): Das Layout entwickeln
- Tutorial: HTML & CSS für Einsteiger (Teil 42): Das Layout weiter anpassen
- Tutorial: HTML & CSS für Einsteiger (Teil 43): Das Grundgerüst erstellen
- Tutorial: HTML & CSS für Einsteiger (Teil 44): Den Inhaltsbereich gestalten
- Tutorial: HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 46): Das Kontaktformular (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 47): Das Kontaktformular (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 48): Die Webseite geht online

Passend zum Inhalt empfehlen wir:
Grundlagen-Tutorial HTML, CSS und JavaScript
Vielen Dank für das interessante Tutorial
Herzlichen Dank für das hilfreiche Tutorial!
Vielen Dank für das Tutorial!
LG Zaina
Danke für die umfangreichen Erklärungen, jetzt hab ich es durchschaut!
Herzlichen Dank für das Tutorial.
Vielen Dank für das interessante Tutorial.
Wie immer. Sehr hilfreich und gut verständlich
Vielen Dank.
Vielen Dank für den weiteren Teil der Reihe!
vielen Dank
Mfg
vielen Dank
Mfg
vielen Dank!
Vielen Dank für den weiteren Teil.
Super - vielen Dank für diesen weiteren Teil.
Vielen Dank für Teil 38.
Vielen lieben Dank für den 38. Teil, sehr gutesTutorial.
Mit jeder Folge steige ich weiter hinter die Geheimnisse von CSS. Danke
So ist es einfach strukturiert was zu lernen - Danke
Wie immer - gutes und lehrreiches Tutorial
Vielen Dank für das interessante Tutorial.
Mehr anzeigen