PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: clear, Kategorien: Positionierung (allgemein), Visual formatting model (CSS 2.1), Basic Box Model (CSS 3)

Umfluss beenden

Beendet die Fließeigenschaften float: left oder float: right und damit das Fließverhalten, welches davor stehenden HTML-Elementen zugewiesen wurde.

CSS-Eigenschaft: clear
KurzbeschreibungWerteStandardwertKategorieHinweis
Umfluss beenden
  • none
  • left
  • right
  • both
  • inherit
none
Allgemein:
Positionierung
CSS 2.1:
Visual formatting model
CSS 3:
Basic Box Model
 

Verwandte Eigenschaften aus der Kategorie: Positionierung (allgemein), Visual formatting model (CSS 2.1), Basic Box Model (CSS 3):

Folgendes ist beim Einsatz von clear zu beachten:

  • clear ist der Gegenspieler von float, bzw. es beendet das Verhalten, welches vorher durch float definiert wurde.
  • Der Einsatz von clear ist von daher immer im Kontext von float zu betrachten:
    • Über float wird Block-Elementen die Eigenschaft genommen, dass sie 100% des verfügbaren Platzes einnehmen, sondern nur so viel Platz wie benötigt. float: left lässt dabei das betreffende HTML-Element nach links fließen, folgender Text und HTML-Elemente fließen rechts um das gefloatete Element herum. float: right macht das Gegenteil, das HTML-Element rutscht nach rechts, der Rest fließt dann links drum herum.
    • Wie im Beispiel Nr. 4 zu sehen ist, drehen mehrere rechts-gefloatete Elemente die Laufrichtung um. Das erste Element liegt dann ganz rechts, das 2. umfließt das 1. Element richtiger Weise links, liegt dann aber auch so rechts wie möglich, somit ist die Reihenfolge von ausschließlich rechts ge-float-eter Elemente von rechts nach links.
  • clear löst diese Umflussverhalten wieder auf. Dabei löst clear: left ausschließlich das float: left auf, clear: right löst nur float: right auf.
  • Über clear: both werden beide float-Eigenschafen beendet, sowohl left als auch right. Von daher kann man clear: left und clear: right vernachlässigen. In der Praxis kann man vereinzelt beobachten, dass man nur eine von den beiden gesetzten Eigenschaften auflösen möchte, ist aber eher die Ausnahme.
Browserunterstützung von clear
Firefox
Firefox		Google Chrome
Google
Chrome		Internet Explorer
Internet
Explorer		Safari
Safari		Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu clear:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    caption-side


Beispiele

HTML:

<div>
   <div class="doRed">eins</div>
   <div class="doBlue">zwei</div>
   <div class="doYellow">drei</div>
   <div class="doGreen">vier</div>
</div>

CSS:

div div {
   width: 50px;
   height: 50px;
   margin: 5px;
   border: 5px solid #c0c0c0;
}
div div.doRed {
   background-color: red;
}
div div.doBlue {
   background-color: blue;
}
div div.doYellow {
   background-color: yellow;
}
div div.doGreen {
   background-color: green;
}
/* Dieses Beispiel ist die Grundlage für die folgenden. Auch bei ausreichend Platz und definierter Breite beginnen Block-Elemente immer in einer neuen Zeile*/

Beispiel Nr. 1 So sieht's aus:

eins
zwei
drei
vier
 

HTML:

<div class="doFloatLeft">
   <div class="doRed">eins</div>
   <div class="doBlue">zwei</div>
   <div class="doYellow">drei</div>
   <div class="doGreen">vier</div>
   <div class="doRed">fünf</div>
   <div class="doBlue">sechs</div>
   <div class="doYellow">sieben</div>
   <div class="doGreen">acht</div>
   <div class="doRed">neun</div>
   <div class="doBlue">zehn</div>
</div>

CSS:

div.doFloatLeft div {
   float: left;
}
/* Über das float: left erhalten die Boxen nun ein Umflussverhalten, die Boxen verhalten sich wie Inline-Elemente. */

Beispiel Nr. 2 So sieht's aus:

eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
 

HTML:

<div class="doFloatLeft">
   <div class="doRed">eins</div>
   <div class="doBlue">zwei</div>
   <div class="doYellow ignoreFloat">drei</div>
   <div class="doGreen">vier</div>
   <div class="doRed">fünf</div>
   <div class="doBlue">sechs</div>
   <div class="doYellow">sieben</div>
   <div class="doGreen">acht</div>
   <div class="doRed">neun</div>
   <div class="doBlue">zehn</div>
</div>

CSS:

div div.ignoreFloat {
   clear: left;
   color: red;
   font-weight: 700;
}
/* Der Box drei wird ein clear: left zugewiesen. Das Umfussverhalten von Box eins und zwei wird damit beendet, folgende Elementen umfließen die Box drei aber weiterhin rechts, da die Definition float: left aus Beispiel Nr. 2 immer noch greift. clear  bezieht sich auf das Verhalten der vorangegangen Elemente, steht float left in der Definition, bestimmt es das Verhalten der folgende Elemente. */

Beispiel Nr. 3 So sieht's aus:

eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
 

HTML:

<div class="doFloatRight">
   <div class="doRed">eins</div>
   <div class="doBlue">zwei</div>
   <div class="doYellow ignoreFloat">drei</div>
   <div class="doGreen">vier</div>
   <div class="doRed">fünf</div>
   <div class="doBlue">sechs</div>
   <div class="doYellow">sieben</div>
   <div class="doGreen">acht</div>
   <div class="doRed">neun</div>
   <div class="doBlue">zehn</div>
</div>

CSS:

div.doFloatRight div {
   float: right;
}
/* Sind alle Elemente rechts gefloatet, sieht die Reihenfolge so aus, als ob die Schreibrichtung verdreht wurde. Die Elemente fließen von rechts nach links. */

Beispiel Nr. 4 So sieht's aus:

eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
 

HTML:

<div class="doFloatRight">
   <div class="doRed">eins</div>
   <div class="doBlue">zwei</div>
   <div class="doYellow ignoreFloatRight">drei</div>
   <div class="doGreen">vier</div>
   <div class="doRed">fünf</div>
   <div class="doBlue">sechs</div>
   <div class="doYellow">sieben</div>
   <div class="doGreen">acht</div>
   <div class="doRed">neun</div>
   <div class="doBlue">zehn</div>
</div>

CSS:

div div.ignoreFloatRight {
   clear: right;
   color: blue;
   font-weight: 700;
}
/* Entsprechend dem Beispiel Nr. 3 wird hier der Umfluss mit der dritten Box beendet. Folgende Elemente fließen aber weiterhin links vom Element selber, da di Angabe aus Beispiel Nr. 4 hier greift. */

Beispiel Nr. 5 So sieht's aus:

eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
 

HTML:

<div class="doFloatLeft">
   <div class="doRed">eins</div>
   <div class="doBlue">zwei</div>
   <div class="doYellow ignoreFloatBoth">drei</div>
   <div class="doGreen">vier</div>
   <div class="doRed">fünf</div>
   <div class="doBlue">sechs</div>
   <div class="doYellow">sieben</div>
   <div class="doGreen">acht</div>
   <div class="doRed">neun</div>
   <div class="doBlue">zehn</div>
</div>

CSS:

div div.ignoreFloatBoth {
   clear: both;
   color: green;
}
/* Hier der gleiche Effekt wie im Beispiel Nr. 3, clear: both erfüllt hier sowohl clear: left als auch clear: right. In der Praxis der gängige Weg. */

Beispiel Nr. 6 So sieht's aus:

eins
zwei
drei
vier
fünf
sechs
sieben
acht
neun
zehn
 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.045 sec.