CSS/Tutorials/Ausrichtung/float und clear

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS


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.

Dies ermöglicht eine individuelle, ansprechende Gestaltung, kann aber auch zu Komplikationen führen.

float[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.

Die Eigenschaft ist dafür gedacht, wie im Print-Layout Bilder oder andere Grafiken innerhalb des Fließtextes zu präsentieren:

Fließtext mit Bildern ansehen …
img {
      width: 10em;
}

.rechts {
	float:right;
	margin-left: 0.5em;
}

img:nth-of-type(2) {
	float:left;
	margin-right: 0.5em;
}

Das oberste Bild ist unformatiert und wird daher als Inline-Element im Elementfluss dargestellt. Es bestimmt mit seiner Höhe die Zeilenhöhe der ersten Zeile.

Die folgenden Bilder wurden mit float aus dem Elementfluss herausgenommen und „schweben“ nun am Rand. Das rechte Bild erhält über die Klasse rechts ein float nach rechts und mit margin-left einen Rand nach links zum Text.

Beim folgenden Bild ist dies umgedreht, wobei es nicht durch eine Klasse, sondern mit nth-of-type aufgrund seiner Position im Markup selektiert wurde.

Beachten Sie: Der zweite Textabsatz erhielt Zeilenumbrüche mit br. Dies sollten Sie vermeiden und immer wieder neue p-Elemente auszeichnen. Abstände zwischen den Absätzen erreichen sie mit margin, bzw. margin-bottom.

Floaten von Block-Elementen[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.

verschobene und überlagerte Blockelemente ansehen …
img {
	float:left;
	width: 15em;
}

p {
	/* overflow: auto; */	
}

aside {
	width: 20em;
	overflow: auto;
}

In diesem Beispiel steht das img außerhalb des Textabsatzes. Durch seinen Float wird es zum Block-Element und fällt aus dem normalen Elementfluss heraus. Der Textabsatz wird durch das Bild teilweise verdeckt – der Inhalt schiebt sich jedoch nach rechts. Der Abstand zwischen dem (außenliegenden) Bild und dem Textinhalt kann nicht gestylt werden.

Das aside-Element hat eine feste Breite von 20em, die auf einem breiten Viewport neben das Bild passen würde. Durch die Breitenangabe „rutscht“ das aside nicht unter das Bild. Bei schmalen Viewports rutscht das aside nach unten und hinterlässt eine Lücke neben dem Bild.

Durch overflow: auto kann verhindert werden, dass die Blockelemente unter die Floats rutschen. eine Lösung für eine repsonsive Platzverteilung bieten sie auch nicht.

Hinweis

Die float-Eigenschaft ist dafür gedacht, Bilder oder andere Elemente innerhalb eines Textes umfließen zu lassen. Für mehrspaltige Layouts mit Block-Elementen ist eine Umsetzung mit Flexbox oder dem Grid Layout Stand der Technik:

Normalen Elementfluss nach einem Float wieder herstellen[Bearbeiten]

Blockelemente werden normalerweise zum Teil von einem Float verdeckt. Mit Hilfe der clear-Eigenschaft kann festgelegt werden, ob ein Blockelement nur von links floatenden, nur von rechts floatenden oder von keinen floatenden Elementen verdeckt werden darf. Das geschieht dadurch, dass der normale Elementfluss (Blockelemente nehmen die gesamte Breite des Elternelementes ein und stehen infolgedessen untereinander) wieder hergestellt wird.

clear[Bearbeiten]

Die Eigenschaft clear legt fest, auf welcher Seite ein Blockelement nicht von einem Float verdeckt werden darf.

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

Folgende Werte sind möglich.

  • none: Standardwert, das Element darf von nach links und nach rechts floatenden Elementen verdeckt werden.
  • left: Das Element darf nicht von nach links floatenden Elementen verdeckt werden.
  • right: Das Element darf nicht von nach rechts floatenden Elementen verdeckt werden.
  • both: Das Element darf weder von nach links floatenden, noch von nach rechts floatenden Elementen verdeckt werden.
  • inherit: Der Wert der clear-Eigenschaft des Elternelements wird geerbt.

Besitzt die Eigenschaft clear den Wert left, right oder both, kann über dem Element ein Freiraum namens Clearance eingefügt werden. Dies hat eine Vielzahl an Auswirkungen.

Hinweis

Aus Kompatibilitätsgründen kann die clear-Eigenschaft auch auf das br-Element in HTML angewendet werden, obwohl es sich dabei nicht um ein Blockelement handelt.

Anwendungsbeispiele[Bearbeiten]

Treppenstufen[Bearbeiten]

Allerdings kann es bei der Positionierung mehrerer Bilder zu unschönen Treppenstufen kommen.[1] Da die Textabsätze nicht so hoch wie das rechts floatende Bild sind, richtet sich das nächste rechts schwebende Bild am vorherigen Bild und nicht wie gewünscht am rechten Rand aus.

Treppenstufen bei gefloateten Bildern ansehen …
img {
  float: right;
  width: 225px;
  margin: 0.2em;
}

Ist Ihnen aufgefallen, dass die untere Erklärung nicht an den vorletzten Textabsatz anschließt, sondern soweit nach unten geschoben ist, dass sie wieder über die ganze Breite des Elternelements dargestellt werden kann?

Clearfix[Bearbeiten]

Dies erreichen Sie, indem Sie mittels der CSS-Eigenschaft clear prüfen, ob sich die obere Rahmenkante eines Elements oberhalb der unteren Außenkante eines Floats befindet. Falls dies der Fall ist, können Sie dem nicht gefloateten Element eine Clearance geben, sodass das nächste gefloatete Element an der beabsichtigten Stelle positioniert wird.[2]

Am elegantesten ist es, die Clearance (oder Clearfix) einem Pseudoelement mitzugeben:

Clearance oder Clearfix ansehen …
img {
  float: right;
  width: 225px;
  margin: 0.2em;
}
p:after { 
  content: ""; 
  display: block; 
  clear: both; 
}
Mit CSS wird jedem Textabsatz ein leeres Pseudoelement mitgegeben, das die Höhe des gefloateten Vorgängerelements berücksichtigt.
Empfehlung: Verwenden Sie float und clear nur so sparsam wie möglich. Diese Eigenschaften waren nur dazu gedacht, einzelne Bilder im Textfluss zu positionieren.

Alternativen[Bearbeiten]

Positionierung mit display: inline-block[Bearbeiten]

Mit der CSS-Eigenschaft display: inline-block können Sie eine Box erzeugen, die Eigenschaften von Inline- und Block-Boxen kombiniert. Anstelle eines früher üblichen div-Elements verwenden wir im Beispiel das semantisch sinnvollere figure. (Weitere Beispiele für das Präsentieren von Bildern mit figure finden Sie in diesem Tutorial.)

Beispiel ansehen …
figure, figcaption {
  margin: 0;
  padding: 0;
}

figure {
  display: inline-block;
}
 
figure img {
  width: 225px;
}

.oben {
  vertical-align: top;
}
Inline-Elemente liegen wie Text auf einer Grundlinie. Deshalb ragt das höhere Bild nach oben weg. Durch vertical-align: top; können Sie die Bilder auch am oberen Rand ausrichten.

Ist Ihnen aufgefallen, dass die Bilder trotz eines auf 0 gesetzten Innen- und Außenabstands einen Abstand zum nächsten Bild haben? Inline-Elemente haben wie Wörter in einem Text einen Abstand, dessen Größe browserabhängig ist. Jedes Leerzeichen und jeder Zeilenumbruch führt so zu einem Abstand.

Eine Möglichkeit den Abstand zu vermeiden wäre es, nach dem schließenden Tag gleich das neue Element zu öffnen:

Schließende und öffnende Tags in einer Zeile
<figure>
 <img src="Lauf-1-hoch.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
 <figcaption>
   ...   
 </figcaption>
</figure><figure>

So entfällt das Leerzeichen und damit auch der Abstand.

Chris Coyier zeigt in diesem Artikel weitere Möglichkeiten wie das Weglassen der End-Tags oder das Setzen der Schriftgröße auf 0, was aber wieder andere Probleme nach sich ziehen kann[3].

Positionierung mit display: flex[Bearbeiten]

Viel einfacher ist das Positionieren mit display:flex. Diese neue Anzeigeart besticht durch ihre Einfachheit:

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari


Positionieren mit display:flex ansehen …
section {
  display: flex;
}
 
figure img {
  width: 100%;
}
 
.verteilt {
  align-items: center;
}
Die einzige feste Größe ist hier die Breite der Bilder, die die volle Breite des figure-Elements einnimmt. Die drei figure-Elemente verteilen sich gleichmäßig über die verfügbare Breite; Angaben zu margin und padding sind möglich, aber nicht nötig.


Quellen[Bearbeiten]

  1. http://www.mediaevent.de/tutorial/css-positionieren-float.html
  2. http://jendryschik.de/wsdev/einfuehrung/eigenschaften/ausrichtung-und-elementfluss#clear
  3. https://css-tricks.com/fighting-the-space-between-inline-block-elements/

noch zu integrieren?[Bearbeiten]

Verschiebung durch Clearance[Bearbeiten]

Besitzt ein Element die Eigenschaft clear, wird geprüft, ob sich die obere Rahmenkante dieses Elements oberhalb der unteren Außenkante eines Floats befindet.

Ist das der Fall, so wird über dem Element ein Freiraum (Clearance genannt) eingefügt. Das bedeutet, dass die obere Rahmenkante des clearenden Elements unter die untere Außenkante des Floats geschoben wird.

Die Wirkung der clear-Eigenschaft betrifft keine Floats, die sich innerhalb des clearenden Elements oder außerhalb der Block-Formatierungs-Umgebung befinden, in der sich das clearende Element befindet.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiel für die Wirkung der clear-Eigenschaft auf floatende Elemente</title>
    <style>
      #float1 { float: left; width: 7em; height: 10em; margin-bottom: 1em; border: 3px solid blue; }
      #float2 { float: right; width: 7em; height: 5em; margin-bottom: 1em; border: 3px solid blue; }
      #inhalt { clear: right; border: 3px solid green; margin-top: 2em; background-color: lightgreen; }
    </style>
  </head>
  <body>
    <h1>Beispiel für die Wirkung der clear-Eigenschaft auf floatende Elemente</h1>
    <div id="float1"></div>
    <div id="float2"></div>
    <p id="inhalt">Dieses Element wird unterhalb des nach rechts floatenden 
      Elements dargestellt, aber vom links floatenden Element verdeckt.
      (<code>clear: right;</code>)
    </p>
  </body>
</html>
In diesem Beispiel befinden sich zwei in unterschiedliche Richtungen floatende Elemente, sowie ein drittes Element, das die Eigenschaft clear: right; besitzt.

Theoretisch würde das Absatzelement an beiden Seiten von einem Float verdeckt werden. Die clear-Eigenschaft bewirkt jedoch, dass sich das Absatzelement unter das nach rechts floatende Element verschiebt.

Genau zu erkennen ist dabei, dass sich die obere Rahmenkante des Absatzelements unter die untere Außenkante des Floats verschiebt.

Effekt auf zusammenfallende Außenabstände[Bearbeiten]

Entsteht durch ein Element Clearance, so kann der obere Außenabstand dieses Elements weder mit den Außenabständen vorheriger Nachbarelemente noch mit den Außenabständen des Elternelements zusammenfallen.

Das bedeutet, dass die Außenabstände eines Elements mit Clearance lediglich mit sich selbst oder den Außenabständen nachfolgender Elemente zusammenfallen können. Der so entstehende Außenabstand kann jedoch nicht mit dem unteren Außenabstand des Elternelements zusammenfallen.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiel für die Auswirkung der clear-Eigenschaft auf zusammenfallende Außenabstände</title>
    <style>
      td { width: 15em; height: 20em; border: 3px solid orange; vertical-align: top; }
      .elternelement { margin-top: 2em; }
      .float { float: left; width: 5em; height: 5em; background-color: lightgreen; }
      .clear { background-color: pink; margin-top: 8em; }
      #clear .clear { clear: left; }
    </style>
  </head>
  <body>
    <h1>Beispiel für die Auswirkung der clear-Eigenschaft auf zusammenfallende Außenabstände</h1>
    <table>
      <thead>
        <tr>
          <th>ohne <code>clear</code></th>
          <th>mit <code>clear</code></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="elternelement">
              <div class="float">Float</div>
              <div class="clear">Element</div>
            </div>
          </td>
          <td id="clear">
            <div class="elternelement">
              <div class="float">Float</div>
              <div class="clear">Clearendes Element</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Diese Beispiele zeigen ein Element der Klasse elternelement, das einen 2em großen oberen Außenabstand besitzt. Darin befindet sich ein Float und ein weiteres Blockelement mit einem 8em großen oberen Außenabstand.

Ohne die clear-Eigenschaft fallen die Außenabstände des Elternelements und des darin enthaltenen Blockelements zusammen.

Wird die clear-Eigenschaft auf das Blockelement angewendet, geschieht folgendes: Da das Blockelement sich neben dem Float befindet, muss es nach unten verschoben werden. Es entsteht Clearance. Da Clearance das Zusammenfallen von Außenabständen verhindert, wird der obere Außenabstand des Elternelements auf 2em zurückgesetzt. Sowohl das floatende als auch das clearende Element werden bei diesem Vorgang nach oben verschoben.
Beachten Sie: Während der Überprüfung, ob Clearance eingefügt werden muss, fallen Außenabstände zusammen, als wäre die clear-Eigenschaft nicht festgelegt worden. Erst wenn Clearance tatsächlich eingefügt werden muss, wird das Zusammenfallen von Außenabständen verhindert.

In einzelnen Fällen kann das dazu führen, dass ein Float nach dem Einfügen von Clearance höher positioniert wird, als es wäre, wenn Clearance nicht eingefügt worden wäre. Etwa dann, wenn der obere Außenabstand eines clearenden Elements mit dem oberen Außenabstand des Elternelements zusammenfällt (siehe Beispiel oben).

In diesem Fall darf das clearende Element laut CSS 2.1 zwei verschiedene Positionen einnehmen: Entweder wird das Element wie im vorherigen Abschnitt beschrieben direkt unter das floatende Element verschoben oder es wird noch weiter nach unten verschoben, bis es seine ursprüngliche Position wieder erreicht hat (im Beispiel würde das Element dann in beiden Fällen die selbe Position einehmen).

Tatsächlich wird von allen Browsern nur die erste Variante implementiert. Ein clearendes Element schiebt sich also immer direkt unter die untere Außenkante eines Floats. In CSS 3 soll die Entscheidung getroffen werden, welche Variante künftig als einzige erlaubt sein wird.

Hinweis

Safari und Chrome erlauben derzeit fälschlicherweise das Zusammenfallen von Außenabständen eines clearenden Elements mit dem unteren Außenabstand dessen Elternelements. Dadurch kann die untere Rahmenkante des Elternelements an der falschen Position angezeigt werden. Auf nachfolgende Elemente hat dies jedoch keine Auswirkungen.

Siehe auch: css-tricks: Good ol’ Margin Collapsing von Chris Coyier, 22.03.2018

Floats umschließen mit Clearance[Bearbeiten]

Ein clearendes Element schiebt sich unter ein floatendes Element. Diese Eigenschaft kann genutzt werden, um Floats von deren Elternelement umschließen lassen zu können.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiel für einen mithilfe der clear-Eigenschaft umschlossenen Float</title>
    <style>
      .zusammenfassung { width: 30em; border: 3px solid orange; }
      .float { float: left; width: 7em; height: 10em; margin-bottom: 1em; border: 3px solid blue; }
      br { clear: both; } /* Variante 1 */
      #pseudo:after { content: ""; display: block; clear: both; } /* Variante 2 */
      h2 { clear: both; } /* für die 2. Unterüberschrift benötigt */
    </style>
  </head>
  <body>
    <h1>Beispiel für einen mithilfe der clear-Eigenschaft umschlossenen Float</h1>
    <h2>Variante 1: Zusätzliches Element</h2>
    <div class="zusammenfassung">
      <div class="float"></div>
      <br>
    </div>
    <h2>Variante 2: Pseudoelement</h2>
    <div class="zusammenfassung" id="pseudo">
      <div class="float"></div>
    </div>
  </body>
</html>
Dieses Beispiel zeigt zwei Varianten, wie ein clearendes Element zur Umschließung eines Floats genutzt werden kann.

In Variante 1 wird am Ende des Elternelements ein zusätzliches Element im Dokument notiert. Die clear-Eigenschaft schiebt dieses Element unter das floatende Element. Das Elternelement wird dadurch soweit vergrößert, dass es das floatende Element zu umschließen scheint.

Derselbe Effekt wird in Variante 2 mit Hilfe eines Pseudoelements erzielt, das für das Elternelement definiert wird. Die Angaben für die Eigenschaften content und display sind erforderlich, damit eine Block-Box erzeugt wird. Die clear-Eigenschaft zeigt nur dann eine Wirkung.

Hinweis

Webautoren sollten die Verwendung eines Pseudoelements bevorzugen, da in diesem Fall das Dokument nicht verändert werden muss sowie Inhalt und Gestaltung strikt von einander getrennt sind. Müssen ältere Browser (v.a. IE < 8) Berücksichtigung finden, ist jedoch ein zusätzliches Element erforderlich.

Wirkung von Clearance einschränken[Bearbeiten]

Ein clearendes Element wirkt sich auf alle Floats aus, die sich in derselben Block-Formatierungs-Umgebung befinden, wie es selbst. Das gilt auch dann, wenn das floatende Element beispielsweise mithilfe negativer Außenabstände aus dem Inhaltsbereich eines Elements hinausgeschoben wurde .

Häufig soll aber gerade das nicht der Fall sein. Dann muss die Wirkung des clearenden Elements eingeschränkt werden. Dies kann erreicht werden, indem Float und Clear durch eine weitere Block-Formatierungs-Umgebung voneinander getrennt werden. Gelegentlich wird dann von einer „lokalen Wirkung“ des clearenden Elements gesprochen.

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiel für die lokale Wirkung eines clearenden Elements</title>
    <style>
      .raster { height: 15em; border-left: 7em solid darkgray; background-color: silver; }
      .float1, .float2 { float: left; width: 6em; border: .5em solid blue; }
      .float1 { height: 10em; margin-left: -7em; }
      .float2 { height: 7em; border-color: orange; }
      .inhalt { background-color: lightgreen; }
      .clear  { clear: both; }
      #bfc    { overflow: auto; }
    </style>
  </head>
  <body>
    <h1>Beispiel für die lokale Wirkung eines clearenden Elements</h1>
    <h2>Wirkung ohne Block-Formatierungsumgebung</h2>
    <div class="raster">
      <div class="float1">Float Eins</div>
      <div class="inhalt">
        <div class="float2">Float Zwei</div>
        <p>Inhalte</p>
        <div class="clear">Clearendes Element</div>
      </div>
    </div>
    <h2>Wirkung mit Block-Formatierungs-Umgebung</h2>
    <div class="raster">
      <div class="float1"></div>
      <div class="inhalt" id="bfc">
        <div class="float2"></div>
        <p>Inhalte</p>
        <div class="clear">Clearendes Element</div>
      </div>
    </div>
  </body>
</html>
Dieses Beispiel zeigt, wie die Wirkung eines clearenden Elements auf einen bestimmten Abschnitt beschränkt werden kann.

Zunächst der Aufbau: Das Element mit der Klasse raster dient als Ausgangspunkt. In ihm befinden sich zwei Elemente: Ein Float, das in den Rahmen das Elternelements hineingeschoben wird und ein Element der Klasse inhalt für weitere Inhalte. In letzterem befinden sich ein weiterer Float und ein clearendes Element.

Normalerweise berücksichtigt das clearende Element beide Floats. Wird jedoch das Element zwischen den beiden Floats so gestaltet, dass es eine neue Block-Formatierungs-Umgebung erzeugen muss (im Beispiel geschieht das mithilfe der overflow-Eigenschaft), so tritt die Wirkung des clearenden Elements nur innerhalb dieser Umgebung in Kraft.