CSS/Eigenschaften/Positionierung/clear

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[Bearbeiten] Normalen Elementfluss nach einem Float wieder herstellen

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.

[Bearbeiten] Die clear-Eigenschaft

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.

[Bearbeiten] Verschiebung durch Clearance

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.

[Bearbeiten] Effekt auf zusammenfallende Außenabstände

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 (Stand September 2011) 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.

ToDo (weitere ToDos)

aktuellen Stand ermitteln --Matthias Scharwies (Diskussion) 19:41, 29. Dez. 2015 (CET)

[Bearbeiten] Floats umschließen mit Clearance

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.

[Bearbeiten] Wirkung von Clearance einschränken

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.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML