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

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!

Das Floaten ist eines der entscheidenden CSS-Konzepte. Ohne das Verständnis dieses Prinzips lassen sich Webseiten nicht auf Basis von CSS erstellen. Floaten kann man hier übrigens sehr schön mit Fließen übersetzen, was die Sache auf den Punkt bringt. Letztendlich bedeutet Floaten nämlich nichts anderes, als dass ein Element sich links oder rechts neben einem anderen Element anordnet. (Im Normalfall würde das Element unterhalb eines anderen Elements stehen).

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.

Jetzt kommt die 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.

Der Eigenschaft 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.

Ein Blick auf die bisherigen Ergebnisse macht deutlich, dass das noch nicht wirklich hübsch aussieht. Tatsächlich fehlen die Abstände zwischen Bild und umfließendem Text. Passt die Syntax dazu folgendermaßen an:

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:

Tatsächlich umfließt nicht nur der erste Absatz die Grafik. Gleiches gilt auch für den zweiten Textabsatz. Das liegt schlicht und ergreifend daran, dass die Grafik über den ersten Absatz nach unten hinausragt. Zum besseren Verständnis weise ich dem Absatz, in dem die Grafik enthalten ist, einfach mal eine Hintergrundfarbe zu.

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

Im folgenden Beispiel weise ich dem zweiten Absatz 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>

Hier wird ein zweispaltiges Layout aufgebaut. Das Besondere dabei: Die Spalten stehen nebeneinander.

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.