CSS/Eigenschaften/Positionierung/float

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mithilfe der Eigenschaft float kann ein Element an die linke oder rechte Innenkante seines Elternelements verschoben werden. Die Besonderheit dabei: Mit der Eigenschaft clear kann festgelegt werden, ob nachfolgende Inhalte um das Element herumfließen oder einen eigenständigen Abschnitt bilden.

Hinweis

Die float-Eigenschaft ist dafür gedacht, Bilder oder andere Elemente innerhalb eines Textes umfließen zu lassen. Für mehrspaltige Laoyuts ist eine Umsetzung mit Flexbox oder dem Grid Layout Stand der Technik:
Empfehlung: Zum besseren Verständnis wird das Studium des Artikels zum Box-Modell empfohlen.

Die float-Eigenschaft[Bearbeiten]

Die Eigenschaft float legt fest, in welche Richtung ein Element verschoben wird.

  • CSS 1.0
  • CSS 2.1
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Erlaubt sind dabei folgende Werte:

  • none: Standardwert; das Element wird nicht verschoben.
  • left: Das Element wird nach links verschoben.
  • right: Das Element wird nach rechts verschoben.
  • inherit: Der Wert der float-Eigenschaft des Elternelements wird geerbt.

Wird durch die Eigenschaft float ein Element verschoben, so wird dieses Float genannt. Ein Float wird durch die margin-box eines Elements definiert, es werden also stets die Außenkanten berücksichtigt.

Ausgehend von der Position, die ein Element im normalen Elementfluss besessen hätte, wird ein Float an die linke bzw. rechte Innenkante des Elternelements verschoben. Im Detail bedeutet das, dass die linke Außenkante eines nach links gefloateten Elements identisch ist mit der linken Innenkante des Elternelements. Das gilt entsprechend auch für nach rechts gefloatete Elemente. Eine Verschiebung nach oben oder unten findet dabei nicht statt.

Beachten Sie: Der Internet Explorer unterstützt die float-Eigenschaft erst ab Version 8 fehlerfrei. Ältere Versionen stellen zwar einfache Floats fehlerfrei dar, können aber in komplexeren Situationen unerwartete Ergebnisse hervorbringen.

Auswirkung auf nachfolgende und umgebende Elemente[Bearbeiten]

Ein gefloatetes Element wird teilweise aus dem Elementfluss herausgelöst. Das bedeutet, dass ein Float keinerlei Einfluss auf sein Elternelement oder nachfolgende Blockelemente besitzt.

Im Einzelnen hat dies folgende Auswirkungen: Das Elternelement eines Floats wird diesen nicht umschließen. Floats können also aus ihrem Elternelement nach unten herausragen. Es kann auch vorkommen, dass das Elternelement zu verschwinden scheint, wenn es nur Floats als Nachfahren besitzt. In diesem Fall gibt es keine Elemente mehr, die innerhalb des Elternelements Platz einnehmen könnten.

Blockelemente, die neben einem Float dargestellt werden, nehmen ohne Berücksichtigung des Floats die volle Breite ihres Elternelements ein. Sie werden also teilweise von einem floatenden Element verdeckt.

Die Besonderheit bei floatenden Elementen liegt in der Fähigkeit, Inlineelemente verschieben zu können. Dabei werden die Zeilenboxen, in denen Texte, Bilder oder andere Inlineelemente dargestellt werden, soweit verkürzt, dass diese um die Float-Box herumfließen können.

Kann ein Wort oder ein Bild nicht neben einem Float dargestellt werden, z.B. weil zwischen dem Float und der Innenkante des Elternelements nicht genug Platz vorhanden ist, so werden der Inhalt und alle nachfolgenden Elemente unter das floatende Element verschoben.

Beispiel ansehen …
    <style>
      #information, #zusammenfassung { width: 100px; height: 200px; }
      #information { float: left; border: 3px dashed blue; }
      #inhalt { border: 3px solid green; background-color: lightgreen; }
      #zusammenfassung { float: right; border: 3px solid orange; margin: 15px; }
    </style>
...
    <h1>Beispiel für ein gefloatetes Element und die Auswirkungen auf nachfolgende Elemente
    </h1>
    <div id="information"></div>
    <div id="inhalt">
      <div id="zusammenfassung"></div>
      <p>Zeilen, also Inhalte wie Texte, Bilder und einige andere 
        Elemente werden von einem Float nicht verdeckt, sondern in der Breite 
        verkürzt, so dass sie um das floatende Element herumfließen können.
      </p>
    </div>
Dieses Beispiel zeigt, wie sich floatende Elemente auf andere Elemente auswirken.

Das blau umrandete Element ist ein nach links gefloatetes Element. Auf dieses folgt ein grün hinterlegtes Blockelement. Da das floatende Element durchsichtig ist, wird klar, dass der Float das nachfolgende Blockelement teilweise verdeckt. Das Blockelement nimmt trotz des floatenden Elements die volle zur Verfügung stehende Breite ein.

Innerhalb des grünen Elements befinden sich Zeilen, die Text enthalten. Diese Zeilen werden durch die floatenden Elemente verkürzt, so dass sie durch die Floats nicht verdeckt werden.

Bei dem orange umrandeten Element handelt es sich um ein nach rechts gefloatetes Element mit einem Außenabstand. Dieser Float befindet sich innerhalb des grünen Blockelements. Das floatende Element wird von seinem Elternelement nicht umschlossen. Stattdessen ragt es aus dem Element heraus.

Verändern Sie die Breite des Browserfensters um die Auswirkungen auf den Textfluss zu beobachten.

Das Box-Verhalten eines Floats[Bearbeiten]

Ein gefloatetes Element wird automatisch als Blockelement dargestellt. Besitzt die display-Eigenschaft des Elements den Wert list-item, so kann das Element auch einen Listenpunkt besitzen. Lautet der Wert der display-Eigenschaft table oder inline-table, wird der Float als Tabelle dargestellt und kann Tabellenüberschriften und andere Tabellenboxen enthalten.

Ein Float kann daher alle für Blockelemente bzw. Tabellen gültigen Eigenschaften annehmen.

Wurde keine Breite festgelegt, so wird die Breite des Elements im shrink-to-fit-Verfahren errechnet. Das bedeutet, dass ein Float so breit wie nötig und so schmal wie möglich dargestellt wird. Das Ergebnis dieser Berechnung kann dabei von Browser zu Browser etwas variieren.

Die Außenabstände einer Float-Box fallen niemals mit anderen Außenabständen zusammen (siehe zusammenfallende Außenabstände).

Nebeneinanderstehende Floats[Bearbeiten]

Befinden sich mehrere Floats nebeneinander, werden bei der Darstellung folgende Richtlinien berücksichtigt. Die einzelnen Punkte sind aus der Sicht von nach links floatenden Elementen formuliert, gelten aber analog auch für nach rechts floatende Elemente.

  • Treffen mehrere Floats aufeinander, so werden diese in der Reihenfolge, in der sie im Dokument vorkommen von links nach rechts angeordnet. Dabei dürfen sich die Margin-Boxen der Floats nicht überlappen (das gilt auch für Floats, die in unterschiedliche Richtungen floaten).
  • Ist die Breite von zwei nebeneinanderstehenden Floats größer als die Breite des Elternelements, wird das zweite floatende Element nach unten verschoben, sodass sich die obere Außenkante dieses Floats unter der unteren Außenkante des vorherigen Floats befindet. In diesem Fall darf der verschobene Float keine sich weiter oben befindende Position einnehmen.
  • Nur ein Float, der die linke Innenkante des Elternelements berührt, darf die rechte Innenkante des Elternelements überschreiten.
  • Grundsätzlich werden Floats so weit oben und links wie möglich positioniert. Eine höhere Position wird dabei einer möglichen, sich weiter links befindenden Position bevorzugt. Ein Float darf nicht höher positioniert werden als andere Floats oder Elemente, die sich vor ihm im Elementfluss befinden.
Beispiel ansehen …
    <style>
      #informationen { border: 3px solid orange; }
      .abschnitt { float: left; width: 15em; height: 15em; background-color: pink; }
      .zwei  { width: 12.5em; height: 12.5em; background-color: lightblue; }
      .drei  { width: 10em; height: 10em; background-color: lightgreen; }
      .clear { clear: both; }
    </style>
 ....
    <h1>Beispiel für nebeneinanderstehende gefloatete Elemente</h1>
    <div id="informationen">
      <div class="abschnitt">Erster Float.</div>
      <div class="abschnitt zwei">Zweiter Float.</div>
      <div class="abschnitt drei">Dritter Float.</div>
      <div class="clear"></div>
    </div>
Dieses Beispiel zeigt drei nebeneinanderstehende nach links floatende Elemente. Durch eine Verkleinerung der Breite des Browserfensters sind folgende Effekte der Reihe nach sichtbar:
  1. Zunächst schiebt sich der grüne Float unter den blauen, da die Breite aller Floats die Breite des Elternelements übersteigt.
  2. Dann schiebt sich der blaue Float unter den roten. Der grüne Float wird dabei neben dem blauen dargestellt, da er nicht höher liegen darf als der Float vor ihm.
  3. Nun schiebt sich der grüne Float erneut unter den blauen.
  4. Da die Floats jetzt nicht mehr weiter nach links verschoben werden können, werden sie nach und nach teilweise außerhalb des Elternelements dargestellt.

Block-Formatierungs-Umgebungen neben einem Float[Bearbeiten]

Normalerweise dürfen Blockelemente von einem Float verdeckt werden (siehe oben). Diese Regel gilt jedoch nicht, wenn das Blockelement eine neue Block-Formatierungs-Umgebung (block formatting context) erzeugt. In diesem Fall ist definiert, dass sich die Margin-Box eines Floats und die Border-Box der Block-Formatierungs-Umgebung nicht überlappen dürfen.

Würde theoretisch eine Überlappung von Float und Blockelement stattfinden, kann das folgende Auswirkungen auf das (Block-)Element haben:

  • Das Element kann neben dem Float platziert werden, wenn keine Breite festgelegt wurde oder die verfügbare Breite neben dem Float größer ist als die festgelegte Breite des Elements. Ohne festgelegte Breite wird das Element durch den Float verschmälert, sodass die Elemente nebeneinander dargestellt werden.
  • Kann das Element nicht verschmälert werden, z.B. weil eine Breite festgelegt wurde, wird das Element so lange unter die vorhandenen Floats verschoben, bis es neben einem Float platziert werden kann oder keine weiteren Floats mehr vorhanden sind, unter die es verschoben werden könnte.
  • Wird das Element verschoben, so schiebt sich die obere Rahmenkante des Elements unter die untere Außenkante des Floats. Dieses Vorgehen ähnelt dem Effekt, den die clear-Eigenschaft hervorrufen kann. Bei dieser Art der Verschiebung fallen jedoch die Außenabstände der beteiligten Elemente nach wie vor zusammen.
Beispiel ansehen …
   <style>
      #zusammenfassung { width: 30em; border: 3px solid orange; }
      #float {
        float: left;
        width: 7em; height: 10em;
        margin-bottom: 1em;
        border: 3px solid blue;
      }
      #inhalt1 {
        border: 3px solid green;
        overflow: auto;
        background-color: lightgreen;
      }
      #inhalt2 {
        width: 25em;
        border: 3px solid green;
        overflow: auto;
        background-color: lightgreen;
      }
    </style>
...
    <h1>Beispiel für ein gefloatetes Element und die Auswirkungen auf Block-Formatierungs-Umgebungen
    </h1>
    <div id="zusammenfassung">
      <div id="float">Floatendes Element.</div>
      <p id="inhalt1">Dieses Element wird neben dem Float dargestellt.</p>
      <p id="inhalt2">Dieses Element wird unter dem Float dargestellt,
        da es neben dem Float keinen Platz hat.
      </p>
    </div>
Dieses Beispiel zeigt, wie sich Blockelemente, die eine Block-Formatierungs-Umgebung erzeugen (im Beispiel die beiden grün hinterlegten Absätze), neben einem Float verhalten.

Für den ersten Absatz ist keine Breite festgelegt, daher passt sich das Element an die verfügbare Breite zwischen dem Float und der gegenüberliegenden Innenkante des Elternelements an.

Für den zweiten Absatz ist eine Breite festgelegt, die größer ist als der Platz neben dem Float. Er wird daher unter das floatende Element verschoben.

Floats mit einer Block-Formatierungs-Umgebung umschließen[Bearbeiten]

Ein Float, dessen Elternelement eine Block-Formatierungs-Umgebung erzeugt, kann aus diesem Element nicht wie üblich herausragen. Es wird stattdessen von diesem Element umschlossen.

Beispiel ansehen …
    <style>
      #zusammenfassung { width: 30em; overflow: auto; border: 3px solid orange; }
      #float {
        float: left;
        width: 7em;
        height: 10em;
        margin-bottom: 1em;
        border: 3px solid blue;
      }
    </style>
...
    <h1>Beispiel für ein gefloatetes Element innerhalb  einer Block-Formatierungs-Umgebung
    </h1>
    <div id="zusammenfassung">
      <div id="float">Floatendes Element.</div>
      Blockelement, das eine Block-Formatierungs-Umgebung erzeugt.
    </div>
Da das Elternelement des floatenden Elements eine Block-Formatierungs-Umgebung erzeugt, kann der Float nicht aus diesem Element herausragen. Dabei wird die Margin-Box des Floats berücksichtigt.
Beachten Sie: Verschiedene Elemente und Boxen erzeugen eine Block-Formatierungs-Umgebung, z.B. auch andere Floats. Ein ähnliches Verhalten können Sie aber auch mit Hilfe der Eigenschaft clear erreichen.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]