Sie sind hier: Startseite -> CSS-Grundlagen -> Positionierung -> Float

CSS-Grundlagen: Float zur Positionierung

CSS-Float: Textfluss eines Elementes

Zu den stärksten Möglichkeiten der Positionierung von Elemente zählt der float-Befehl. Mit ihm können Bilder und ganze Ebenen aneinandergekettet werden - oder eben auch nicht. Denn zum float-Befehl gehört auch der clear-Befehl, der float ad absurdum führen kann.

Wenn beispielsweise ein Div-Container mit

float:left;

definiert wird, dann schließt er sich positionsmäßig dem vorherigen Element an. Diese Positionierung kann um die Abstandsangaben verfeinert werden, sodass beispielsweise zwei Ebenen durch den margin-Befehl um 20 Pixel voneinander getrennt positioniert werden können.

mit clear:left;

beendet man den Vorgang. Das nächste Element würde erst in der nächsten Zeile wieder dargestellt werden, auch wenn in der vorherigen noch ausreichend Platz herrschen würde. Neben der Angabe left ist auch right und none, wobei none die Voreinstellung ist, die nicht extra angegeben werden müsste.

float:right bedeutet, dass sich das Element am rechten Rand orientiert. So könnte man bei einem dreispaltigen Layout die linke Spalte mit left, die mittlere ebenso mit left und die rechte Spalte mit right definieren. Die Mittelspalte lehnt sich an die linke (meist die Navigationsspalte) an, während die rechte sich für die Position der Mitte nicht interessiert und automatisch rechts angebracht wird.

Übersicht der Unterseiten

Beispiel: float

Informationen über ein praktisches CSS-Beispiel für die Verwendung des float-Befehles.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Positionierung

Startseite CSS-Grundlagen