Verhalten der umfließenden Elemente mit float festlegen

Standardmäßig werden Block-Elemente nicht nebeneinander angeordnet und immer mit einer neuen Zeile begonnen. In dem Fall sagt man dazu, dass die Box nicht "floatet" bzw. nicht von umfließenden Elementen umgeben ist. Möchte man mehrere Boxen nebeneinander anordnen, muss man mit der Eigenschaft float das Umfließen von Elementen festlegen.

Wichtig ist, dass genug Platz für die Anordnung des nächsten Elements vorhanden ist. Sollte das nicht der Fall sein, wird das nächste Element trotzdem unterhalb angeordnet. Nachfolgend ist die Syntax für die Eigenschaft float anhand eines Beispiels.

Werte für die Eigenschaft float

Die folgenden Werte kann man für die Eigenschaft float verwenden.

none (Standardwert, kein Umfließen möglich)
left (Element wird linksseitig angeordnet und lässt sich rechts umfließen)
right (Element wird rechtsseitig angeordnet und lässt sich links umfließen)
initial (Setzt auf den Standardwert)
inherit (Geerbt vom Elternelement)

Beispiel für float: left;

Mit dem folgenden CSS- und HTML-Code sorgt man dafür, dass zwei DIV-Container linksseitig nebeneinander angeordnet werden. Das Umfließen erfolgt auf der rechten Seite der Elemente, sodass weitere Elemente rechts daneben angeordnet werden können, bis der Platz nicht ausreicht. Der Rahmen dient nur zur besseren Sichtbarkeit und Unterscheidung der DIV-Container.

.selektor1 {
width: 300px;
float: left;
border: 1px solid #000000;
}

.selektor2 {
width: 300px;
float: left;
border: 1px solid #000000;
}

<div class="selektor1">Inhalt1</div>
<div class="selektor2">Inhalt2</div>

Die beiden DIV-Elemente würden wie folgt angeordnet werden.

Beispiel für float: right;

Man kann die Elemente nicht nur linksseitig anordnen, sonder auch rechtsseitig. In dem Fall lässt man die Elemente auf der linken Seite umfließen. Nachfolgend sind zwei Beispielcodes in CSS und HTML.

.selektor1 {
width: 300px;
float: right;
border: 1px solid #000000;
}

.selektor2 {
width: 300px;
float: right;
border: 1px solid #000000;
}

<div class="selektor1">Inhalt1</div>
<div class="selektor2">Inhalt2</div>

Die beiden DIV-Container würden wie folgt angeordnet werden.

Beispiel mit float: left; und float; right;

Es ist auch möglich, den Elementen unterschiedliche Werte zuzuweisen. Sofern es Sinn macht und genügend Platz zur Verfügung steht, können sie nebeneinander angeordnet werden, obwohl die Werte unterschiedlich sind. Wird der horizontale Platz nicht komplett ausgenutzt, entsteht zwischen den Elementen ein Zwischenraum, der mit weiteren Elementen gefüllt werden kann.

.selektor1 {
width: 300px;
float: left;
border: 1px solid #000000;
}

.selektor2 {
width: 300px;
float: right;
border: 1px solid #000000;
}

<div class="selektor1">Inhalt1</div>
<div class="selektor2">Inhalt2</div>

Wenn das Umfließen beendet werden soll, kann man beim nächsten Element die Eigenschaft clear verwenden. Hierbei kann man wählen, ob man das Umfließen für links, rechts oder für beide beenden möchte.