Experimentieren Sie mit diesen Angaben, wenn <br clear=all> nicht den gewünschten Effekt bringt.
Das klassische Einsatzgebiet für float ist die Positionierung von Grafiken in einem Fließtext. Um zu zeigen, wie float funktioniert, binden Sie auf der Startseite eine Grafik ein und lassen den Text auf der Seite drum herum fließen.
Die Grafik einbinden
Als Beispielfoto bietet sich ein schwebender Luftballon an. Sie können für das folgende Beispiel eine beliebige eigene Grafik benutzen oder die Beispieldatei ballon.jpg von der Buch-CD nehmen.
ToDo: Eine Grafik auf der Startseite einbinden
- Kopieren Sie die Grafik ballon.jpg in den Übungsordner, in dem auch die Startseite index.html liegt.
- Öffnen Sie die Startseite index.html und fügen Sie die Grafik an den Anfang des ersten Fließtextabsatzes ein:<div id=”textbereich”>
<h2>Startseite</h2>
<p><img src=”ballon.jpg” alt=”Roter Luftballon” width=”78″
height=”100″ />Webseiten bestehen aus <strong>rechteckigen
Kästen</strong>, <!– Rest des Absatzes –></p>- Speichern Sie die Webseite und betrachten Sie sie im Browser.
Das Bild ist drin, aber so besonders hübsch sieht es nicht aus:
Die Grafik floaten
Die Eigenschaft float kann die Werte left oder right bekommen, um das Element nach links (float: left) oder nach rechts (float: right) schweben zu lassen. Nur der Vollständigkeit halber: In die Mitte schweben lassen geht nicht, es gibt kein float: center. Versuchen Sie es gar nicht erst.
Um den Ballon nach rechts schweben zu lassen, können Sie die Deklaration float:right mit dem Attribut style direkt in das img-Element schreiben:
ToDo: Die eingebundene Grafik auf der Startseite nach rechts floaten
- Öffnen Sie die Startseite index.html und ändern Sie den Quelltext wie folgt:<h2>Startseite</h2>
<p><img src=”ballon.jpg” alt=”Roter Luftballon” width=”78″
height=”100″ style=”float:right;” />Webseiten bestehen aus …- Speichern Sie die Webseite und betrachten Sie sie im Browser.
Noch nicht besonders hübsch, aber der Text fließt um die Grafik herum. Die Grafik macht zunächst die drei typischen Float-Bewegungen:
- aus dem Fluss heraus,
- in der umgebenden p-Kiste (am linken Rand) ganz nach oben
- und dann so weit wie möglich nach rechts.
Da die Grafik in der p-Kiste sitzt, schwebt sie nicht höher als die obere Grenze des Absatzes, ragt aber nach unten heraus:
Wichtig beim Floaten ist unter anderem die folgende Tatsache:
- Der Text im Inhaltsbereich des Absatzes umfließt die Grafik.
- background, padding, border und margin des Absatzes hingegen fließen nicht um die Grafik, sondern rutschen darunter.
Mit anderen Worten: Nur der Text im Inhaltsbereich des Absatzes fließt um die Grafik, die Eigenschaften background, padding, border und margin reichen bis unter die gefloatete Grafik und befinden sich tatsächlich dahinter.
Abstand zwischen Grafik und Text definieren
Um einen bestimmten Abstand zwischen Text und Grafik zu definieren, weisen Sie ihn am einfachsten nicht dem drum herum fließenden Absatz zu, sondern der schwebenden Grafik.
ToDo: Abstand zwischen der Grafik und umfließendem Text festlegen
- Öffnen Sie die Startseite index.html und ändern Sie den Quelltext wie folgt:<h2>Startseite</h2>
<p><img src=”ballon.jpg” alt=”Roter Luftballon” width=”78″
height=”100″ style=”float:right; margin-left: 15px;” />
Webseiten bestehen aus …- Speichern Sie die Webseite und betrachten Sie sie im Browser.
Jetzt ist durch das margin-left ein Abstand von 15px zwischen umfließendem Text und gefloateter Grafik. Falls kein Unterschied sichtbar wird, spielen Sie einfach ein bisschen mit dem Wert für margin-
ERLÄUTERUNG 2:
Text formatieren mit HTML
| Text um Grafiken fließen lassen | |
 |  Grafik mit umfließendem Text einbinden Textfortsetzung unterhalb der Grafik erzwingen |
Grafik mit umfließendem Text einbinden
Anzeigebeispiel: So sieht’s aus
Grafiken, die Sie mit dem <img>-Tag referenzieren, können Sie links oder rechts ausrichten. Der umgebende Text fließt dabei um die Grafik.
Beispiel 1:
| <img src=”datei.gif” align=left>Text, der rechts um die links ausgerichtete Grafik fließt |
Beispiel 2:
| <img src=”datei.gif” align=right>Text, der links um die rechts ausgerichtete Grafik fließt |
Erläuterung:
Mit den Angaben align=left bzw. align=right veranlassen Sie den Browser, die Grafik linksbündig bzw. rechtsbündig auszurichten und den darauffolgenden Fließtext rechts bzw. links neben der Grafik anzuzeigen und um die Grafik herumfließen zu lassen (align = Ausrichtung, left = links, right = rechts).
Beachten Sie:
Der umgebende Text kann verschiedene Elemente enthalten, zum Beispiel auch Überschriften oder Listen.
Sie können auch den 
Abstand zwischen Grafik und Text kontrollieren.
Um Grafiken auszurichten, ohne den folgenden Text um die Grafik fließen zu lassen, notieren Sie vor und hinter der Grafik entsprechende Textabsätze (Absatzschaltungen) – zum Beispiel durch <p><img src=”datei.gif”><p> oder <p align=center><img src=”datei.gif”><p>.
Textfortsetzung unterhalb der Grafik erzwingen
Anzeigebeispiel: So sieht’s aus
Manchmal möchten Sie vielleicht nur zwei oder drei Zeilen kommentierenden Text neben der Grafik haben und den folgenden Text dann unterhalb der Grafik fortsetzen. Dazu müssen Sie einen speziellen Umbruch erzwingen, der den Textfluß neben der Grafik unterbricht und stattdessen unterhalb der Grafik fortfährt.
Beispiel:
| <title>Titel der Datei</title> <img src=”datei.gif” align=left>Text, der um die Grafik fließt<br clear=all> und Text, der unterhalb der Grafik weitergeht |
Erläuterung:
Wenn Sie mit align=left oder align=right darauffolgenden Text um eine Grafik fließen lassen, können Sie innerhalb des umfließenden Textes die Angabe <br clear=all> notieren, um den Textfluß zu unterbrechen und unterhalb der Grafik fortzufahren (br = break = Umbruch, clear = löschen, all = alles).
Beachten Sie:
Neben <br clear=all> sind auch die Angaben <br clear=left> und <br clear=right>
