CSS-Float

CSS Tutorial  >  Float

Auf den größeren Webseiten, die Werbeflächen anzeigen, sieht man häufig, dass Text einen Werbeblock einhüllt. Dies wird mit der float-Eigenschaft erreicht.

Die float-Eigenschaft hat drei mögliche Werte: ‚left’, ‚right’, und ‚none’. Schauen wir uns die folgenden Beispiele an:

Beispiel 1: Mit dem CSS-Statement:

#leftfloat {   float:left; }

würde der folgende HTML-Code,

<span id="leftfloat"><img src="yp.jpg"></span>Dieses Beispiel illustriert wie sich float:left auf die Darstellung eines Blocks auswirkt. Beachten Sie, wie das Bild zur linken Seite „schwebt“.

so aussehen:

Dieses Beispiel illustriert wie sich float:left auf die Darstellung eines Blocks auswirkt. Beachten Sie, wie das Bild zur linken Seite „schwebt“.

Beispiel 2: Mit dem CSS-Statement:

#rightfloat {   float:right;   width:50px; }

würde der folgende HTML-Code,

<span id="rightfloat"><img src="yp.jpg"></span>Dieses Beispiel illustriert, wie sich float:right auf die Darstellung eines Blocks auswirkt. Beachten Sie, wie das Bild zur rechten Seite „schwebt“.

so aussehen:

Dieses Beispiel illustriert, wie sich float:right auf die Darstellung eines Blocks auswirkt. Beachten Sie, wie das Bild zur rechten Seite „schwebt“.

Beachten Sie auch, dass die width-Eigenschaft den Platzhalter zwischen dem Bild und dem Text vergrößert.