2.8.8 Textumfluss `<float>`
en <float>
fr <float>

1 Prinzip und Syntax
- a) Allgemein
- b) Beispiel 1
- c) Beispiel 2
- d) Beispiel 3
2 CSS-Layouts, basiert auf float und clear
3 Probleme mit float

⇧ 1 Prinzip und Syntax

a) Allgemein
b) Beispiel 1
c) Beispiel 2
d) Beispiel 3

↑ a) Allgemein

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 en Syntax: float

Hessendscher de Webstandards - Workshop

↑ b) Beispiel 1

1) Angabe im Quelltext

 <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>

2) Ausgabe im HTML-Dokument

Ü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 de float (Textumfluss)
SELFHTML de Beispiel

↑ c) Beispiel 2

1) Angabe im Quelltext

<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>

2) Ausgabe im HTML-Dokument

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: en 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.

1) Angabe im Quelltext

<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>

2) Ausgabe im HTML-Dokument

1.Block

2. Block

3. Block