2.6.8 Textumfluss `<float>`

a) Prinzip und Syntax

Mit float: wird bestimmt, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfliesst.
Folgende Angaben sind möglich (Syntax):

<...style="float:left">
<...style="float:right">
<...style="float:none">

Web Design Group: Syntax: float

Hessendscher: Webstandards - Workshop

b) Beispiel 1

 <h1 style="width:400px;float:left;color:red">
 Überschrift mal anders </h1>
 <p style="font-size:120%">Eine Überschrift
 muss nicht immer einen langweiligen, über die ganze
 Breite des Anzeigefensters gehenden Block erzeugen.
 Sie kann auch mal seitlich vom Text stehen,
 und der Text fließt um die Überschrift.
</p>

Überschrift mal anders

Eine Überschrift muss nicht immer einen langweiligen, über die ganze Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal seitlich vom Text stehen, und der Text fließt um die Überschrift.

SELFHTML: float (Textumfluss)
SELFHTML: Beispiel

c) Beispiel 2

<p>
 <span style="float:left;width:0.7em;font-size:400%;
 font-family:algerian,courier;line-height:80%;">
 I </span>
 n this paragraph, the first letter of the text is embedded
 in a span element. The span element has a width
 that is  0.7 times the size of the current font.
 The font-size of the span element is 400% 
 (quite large) and the line-height is 80%.
 The font of the letter in the span will be in "Algerian".
</p>

I n this paragraph, the first letter of the text is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian".

W3Schools: Beispiel: Let the first letter of a paragraph float to the left

d) Beispiel 3

Die einzelnen Block-Elemente "div" werden mit "float" nebeneinander gesetzt
Das letzte div hat keine "float" mehr.

<div style="float:left;border:1px solid #000;
 background-color:#efefef;
 height:10%;width:20%;">1.Block </div>
 <div style="float:left;border:1px solid #000;
 background-color:#efefef;
 height:10%;width:60%;">2.Block </div>
 <div style="border:1px solid #000;
 background-color:#efefef;
 height:10%;width:20%;">3.Block </div>

1.Block

2. Block

3. Block