Anhalten des Textflusses neben der Grafik im HTML
Grafiken und der <br clear="left" />-Tag
Was können Sie tun, wenn Sie den Raum neben der Grafik nicht weiterhin auffüllen, sondern eine neue Zeile unterhalb der Grafik beginnen wollen? Ein normaler Zeilenumbruch wird da nicht genügen – er wird die Zeile nur um einen Zeilenabstand weiterschieben. Auch eine neue Absatzmarke wird den Text weiterhin um das Bild herumfließen lassen. Um das Herumfließen des Textes um die Grafik endgültig zu unterbrechen, setzen Sie eine Zeilenumbruch-Kennung (<br />) mit dem nennen Attribut clear (löschen) ein. Mit dem clear-Attribut können Sie die Zeile so umbrechen, dass die nächste Textzeile erst nach dem Ende der Grafik beginnt (und zwar geht sie dann zum Seitenrand unterhalb der Grafik).
Das
clear-Attribut kann einen dieser drei Werte annehmen:
- Left - Umbruch zum freien linken Rand bei allen linksbündig ausgerichteten Grafiken
- Right - Umbruch zum freien rechten Rand bei allen rechtsbündig ausgerichteten Grafiken
- All - Umbruch zu einer Zeile, die auf beiden Seiten frei ist
Das
clear-Attribut für das <br />-Tag gilt in HTML 4.0 als verworfen und wurde von Style-Sheet-Attributen ersetzt.
Das folgende Code-Beispiel zeigt die Grafik, um die etwas Text gelegt wird. Ein Zeilenumbruch mit clear="left" bricht den Textfluss um die Grafik ab und führt den Text nach der Grafik fort. Abbildung zeigt das Ergebnis im Safari.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/transitional.dtd">
</head>
<body>
<img src="turn_right_128.png" alt="HTML-Lernen" align="left" />
<h1>
HTML Lernen - Grundlagen und Tutorials
</h1>
<br clear="left" />
<p>
Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam, maecenas auctor magna dolor ex laoreet primis sapien metus quis, ipsum ullamcorper mauris dignissim.
</p>
<p>
Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam, maecenas auctor magna dolor ex laoreet primis sapien metus quis, ipsum ullamcorper mauris dignissim nisl porta dictumst torquent scelerisque luctus, cursus montes vulputate ornare est sem.
</p>
