Float

Elemente können mithilfe der Eigenschaft position positioniert werden oder aber mit float. Aufgrund des besonderen Verhaltens von float auf gleich mehrere Elemente, wurde daraus eine eigene Eigenschaft geschaffen.

Ähnlich, wie bei den Eigenschaften position:absolute; und position:fixed, bewirkt auch float, dass das damit bestückte Element aus dem Dokumentenfluss herausgenommen wird. Hierbei tritt das dafür bekannte Merkmale auf:

Steht dieses Element in einem anderen im HTML-DOM, hat es keinen Einfluss auf dessen Höhe oder Breite

Jedoch ist Vorsicht geboten, denn anders als position:absolute; und position:fixed wird dieses Element noch von den umliegenden Elementen "bemerkt". Dieses Verhalten soll mit dem folgenden Beispiel demonstriert werden:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <div class="container" style="position: relative;"> <div id="Block1">Block1</div> <div id="Block2">Block2</div> <div id="Block3">Block3</div> </div> <div class="container" style="position: relative;"> <div id="Block4">Block4</div> <div id="Block5">Block5</div> <div id="Block6">Block6</div> </div> </body> </html>
.container { width: 100px; height: 100px; margin: 10px; border: 1px solid red; } #Block1 { position: absolute; left: 0; top: 0; } #Block4 { float: left; }

Während das Element <div id="Block1"></div> quasi in der "Luft" zu schweben scheint und der Text "Block1" über dem Text "Block2" angezeigt wird, wird das Element <div id="Block4"></div> mit der Eigenschaft float:left; von den anderen Elementen dieses Containers "bemerkt". Aus diesem Grund wird der Text "Block5" nicht unter, sondern neben dem Text "Block4" angezeigt.

Ein anderes Verhalten zeigt float, sobald eine feste Breite ins Spiel kommt. Wenn wir den "Float-Blöcken" im obigen Beispiel eine feste Breite zuweisen, wird lediglich das erste Element zur linksbündigen Darstellung angewiesen. Die anderen Elemente reihen sich, wie geplant untereinander aus. Doch worin liegt dann der Sinn?

Ganz einfach: Mit float können wir Elemente nebeneinander ausrichten, die sich den ihnen zur Verfügung stehenden Platz nach anzeigen. Fügen wir im obigen Beispiel allen Blöcken die Eigenschaft float:left; zu, so richten sich diese nacheinander am linken Rand aus, bis der Platz nicht mehr ausreicht. Danach wird ein Zeilenumbruch erzwungen. Deswegen steht der Text "Block6" auch unter den beiden anderen Texten.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <div class="container" style="position: relative;"> <div id="Block4">Block4</div> <div id="Block5">Block5</div> <div id="Block6">Block6</div> </div> </body> </html>
.container { width: 100px; height: 100px; margin: 10px; border: 1px solid red; } #Block4, #Block5, #Block6 { float: left; }

Dieses Verhalten kennen wir von Inline-Block-Elementen, welche wegen der Beibehaltung des Dokumentenflusses die bessere Wahl darstellen.

Wenn wir die Flussrichtung ändern und bei der Eigenschaft den Wert right angeben, werden wir eine scheinbar vertauschte Reihenfolge der Texte feststellen. Für diese Demonstration ist die Containerbreite auf 400px gesetzt:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <div class="container" style="position: relative;"> <div id="Block4">Block4</div> <div id="Block5">Block5</div> <div id="Block6">Block6</div> </div> </body> </html>
.container { width: 100px; height: 100px; margin: 10px; border: 1px solid red; } #Block4, #Block5, #Block6 { float: right; }

Als erstes wird der Text "Block6" angezeigt, dann "Block5" und als letztes "Block4". Also scheinbar genau umgekehrt zum vorherigen Beispiel. Dieses Verhalten ist jedoch logisch, wenn wir beachten, dass der Browser der Reihe nach aus dem HTML-DOM die Elemente am rechten Rand aufreiht. Aus diesem Grund steht das erste Element mit dem Text "Block4" an erster Stelle, nur auf der rechten Seite. Die folgenden Elemente werden dahinter (also links daneben) angereiht.

Clear

Wenn wir Elemente in einem übergeordneten Element mit der Eigenschaft float initialisieren, so wird damit bezweckt, dass diese Elemente technisch gesehen aus dem Dokumentenfluss herausgenommen werden. Somit wird bei folgendem Beispiel die Höhe des Elternelements nicht gesetzt, da es technisch gesehen auch keine Elemente beinhaltet:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <div id="container" style="position: relative;"> <div class="FloatBlock">FloatBlock</div> </div> </body> </html>
#container { width: 100px; margin: 10px; border: 1px solid red; } .FloatBlock { float: right; height: 300px; }

Wollen wir, dass ein Elternelement die Höhe von Float-Elementen in die Berechnung der Höhe miteinbezieht, müssen wir auf die Eigenschaft clear zurückgreifen:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <div id="container" style="position: relative;"> <div class="FloatBlock">FloatBlock</div> </div> </body> </html>
#container { width: 100px; margin: 10px; border: 1px solid red; } #container:after { content: '.'; clear:both; visibility: hidden; height: 0; } .FloatBlock { float: right; height: 300px; }

Da Browser für die Anzeige einer Höhe jedoch einen Inhalt benötigen, greifen wir auf einen Trick zurück. Mit der Pseudoklasse :after weisen wir dem Browser an, einen Punkt (content: '.';) am Ende des Elternelements anzuzeigen. Somit kann er die Höhe des Elternelements trotz Float-Elementen berechnen, denn wir haben dem Punkt ja die Eigenschaft clear:both;, also "löse jegliche Float-Zustände auf", mitgegeben. Da der Punkt jedoch nicht sichtbar sein soll, setzen wir vorsichtshalber die Höhe auf 0 und die Sichtbarkeit auf hidden.