CSS-Eigenschaft: float, Kategorien: Positionierung (allgemein), Visual formatting model (CSS 2.1), Basic Box Model (CSS 3)
Elementen-Fließrichtung
Bestimmt, welche Ausrichtung ein HTML-Element im Elementfluss einnimmt und wie folgende Elemente dieses umfließen.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Elementen-Fließrichtung |
| none |
|
Verwandte Eigenschaften aus der Kategorie: Positionierung (allgemein), Visual formatting model (CSS 2.1), Basic Box Model (CSS 3):
- bottom
- clear
- direction
- display
- Aktuelle Seite: float
- height
- left
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- max-height
- max-width
- min-height
- min-width
- overflow
- overflow-style
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- position
- right
- rotation
- rotation-point
- top
- unicode-bidi
- visibility
- width
- z-index
Folgendes ist beim Einsatz von float zu beachten:
- Block-Elemente (<h1>, <div>, <p>, usw.) nehmen ohne eine besondere Anweisung 100% des verfügbaren Platzes ein und werden immer in einer neuen Zeile dargestellt. Inline-Elemente (z.B. <strong>, <span>, Text selber) werden in der westlichen Welt von links nach rechts dargestellt, nehmen den Platz ein, den sie benötigen und brechen in die nächste Zeile um, wenn der Platz bis zum Ende der Zeile nicht ausreicht. float beeinflusst den Elementfluss und verändert vor allem das Verhalten von Block-Elementen.
- float: left lässt das betreffende HTML-Element nach links "rutschen". Folgender Text umfließt das gefloatete Element dann rechts und unten.
- float: right macht entsprechend das Gegenteil. Das gefloatete Element "rutscht" nach rechts, Text umfließt das konfigurierte Element dann links und unten.
- Ein gefloatetes Element nimmt immer den Raum ein, der verfügbar ist. Falls dies die komplett Breite ist, wird der float-Effekt nur bedingt sichtbar. Block-Elemente werden normal angezeigt, Inline-Elemente rutschen aus dem Kontext raus und werden in der nächsten Zeile dargestellt. HTML-Boxen benötigen von daher eine Breitenangabe, damit das float kontrolliert greifen kann.
- float: none setzt ein gegebenenfalls geerbtes Verhalten wieder auf das "normale" Verhalten. Ein Element beginnt wieder in einer neuen Zeile, falls es sich um ein Block-Element beziehungsweise an die "normale" Stelle im Fließtext, falls es sich um ein Inline-Element handelt.
- float: left beziehungsweise float: right beeinflusst das Fließverhalten aller folgenden HTML-Elemente. Dieses wird durch die Eigenschaft clear wieder "neutralisiert". Ein clear: left beendet das float: left, clear: right hebt float: right auf, clear: both kann eingesetzt werden, um beide Werte wieder außer Kraft zu setzen. Das clear muss dabei einem nachfolgenden Element zuzuweisen und macht nur Sinn, wenn zwischen dem gefloateten und dem "geclearten" Element mindestens ein weiteres HTML-Element vorhanden ist.
- Die Höhe einer Box wird normalerweise durch die Elemente innerhalb der Box bestimmt. Ein gefloatetes Element innerhalb einer Box löst dieses Verhalten auf, die Höhe der Box wird lediglich nur noch durch die Menge des Inhalts bestimmt. Die gefloatete Box ragt nach unten aus der Box heraus. Nebeneffekt ist beispielsweise, dass Hintergrundfarben nicht mehr angezeigt werden. Die Lösung ist ein an der richtigen Stelle eingesetztes clear. Im Beispiel Nr. 17 und 18 wird gezeigt, wo dieses eingefügt werden muss.
- Eine weitere Herausforderung sind sicher die vielfältigen Kombinationen von gefloateten Elementen. Ab Beispiel Nr. 10 sind verschiedene Konstellationen zu sehen, welche die Komplexität dieser Eigenschaft demonstrieren.
- Achtung! Textverwirrung:
float wird auf den meisten deutschen Referenzen mit "Textumfluss" bezeichnet. Dies ist genau genommen nicht richtig und kann zu Verwirrungen führen: Einerseits beeinflusst float nicht ausschließlich Text, sondern kann alle nachfolgende HTML-Elemente "durcheinander bringen".
Andererseits birgt diese Übersetzung von float die Gefahr, dass man ein float: left als "linken Textumfluss" verstehen könnte. Nach dieser Formulierung würde der umgebende Text links fließen, das Element selber folglich rechts angezeigt werden. Genau das Gegenteil ist aber der Fall: Ein float: left lässt das Element selbst nach links "rutschen", weitere Elemente umfließend dieses dann rechts. Das ganze entsprechend umgekehrt für float: right.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu float:
- W3C Spezifikation:
http://www.w3.org/TR/CSS2/visuren.html#propdef-float
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
flex-wrap - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
float-offset
Beispiele
HTML:
<p><img src="img/eck.png" alt="">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
/* Dieses Beispiel zeigt das Standardverhalten. Eine Grafik (Inline-Element) wird normal im Textfluss angezeigt und steht mit der Unterkante auf der "Grundlinie" des Textes. */Beispiel Nr. 1 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p>Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.<img src="img/eck.png" alt=""> Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
/* Deutlicher wird das Standardverhalten in diesem Beispiel. Eine Grafik innerhalb des Fließtextes wird wie alle anderen Inline-Elemente (wie Text) von links nach rechts dargestellt. Dabei bestimmt hier die Grafik auch die Höhe der Zeile. */Beispiel Nr. 2 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p><img class="floatLeft" src="img/eck.png" alt="">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
.floatLeft {
float: left;
}
/* Hier hat die Grafik ein float: left. Das bedeutet, die Grafik selber "rutscht" nach links, der Text umfließt diese dann rechts und unten. */Beispiel Nr. 3 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p><img class="floatRight" src="img/eck.png" alt="">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
.floatRight {
float: right;
}
/* Hier das gegenteilige Beispiel zu Nr. 3. Die Grafik hat ein float: right und fließt selber nach rechts, der Text umfließt diese dann links und unten. */Beispiel Nr. 4 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="floatStrong">Es hat lange gedauert, bis ich <strong>begriffen</strong> habe, was es bedeutet, ein blinder Text zu sein: Man macht <strong>keinen Sinn</strong>. Man wirkt hier und da aus dem Zusammenhang gerissen. Man macht keinen Sinn. Man wirkt <strong>hier und da</strong> aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
p.floatStrong strong {
float: right;
color: red;
}
/* Über diese Anweisung werden die strong-Elemente nach rechts gefloatet. Dabei tun sie dies in der Zeile, in der sie stehen.
Das rot dient lediglich der Hervorhebung. */Beispiel Nr. 5 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="floatStrong"><span class="vorFloat">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein:</span> <strong>Man machtkeinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Man macht keinen Sinn. Man wirkt hier und da</strong> <span class="nachFloat">aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</span></p>CSS:
span.vorFloat {
color: orange;
}
span.nachFloat {
color: blue;
}
/* Hier ist die rote Zeile aus dem Zusammenhang gefloatet, nimmt aber die ganze Zeilenbreite ein und rutscht aus dem Kontext in die nächste Zeile.
Über die Farben des Textes vor und hinter dem strong wird deutlich, an welcher Stelle dieses aus dem Elementfluss "raus-gefloatet" ist. */Beispiel Nr. 6 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man machtkeinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<p class="floatStrong">Es hat lange gedauert, bis ich <strong class="undoFloat">begriffen</strong> habe, was es bedeutet, ein blinder Text zu sein: Man macht <strong class="undoFloat">keinen Sinn</strong>. Man wirkt hier und da aus dem Zusammenhang gerissen. Man macht keinen Sinn. Man wirkt <strong class="undoFloat">hier und da</strong> aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
p.floatStrong strong.undoFloat {
float: none;
}
/* Auf dieses Beispiel greift noch das float: right aus Beispiel Nr. 5.
Über das float: none wird den strong-Elementen wieder das "normale" Verhalten zugewiesen, sie "rutschen" wieder an die Stelle, wo sie im normalen Elementfluss wären. */Beispiel Nr. 7 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
HTML:
<div>Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: <div class="floatDiv">Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen.</div> Oft wird man gar nicht erst gelesen. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</div>CSS:
div.floatDiv {
float: left;
border: 1px solid blue;
}
/* Ohne Breitenangabe nimmt einen Box den verfügbaren Platz ein. Da dies in diesem Bespiel die komplette Breite ist, wird kein float deutlich.
Anders als bei Inlin-Elementen wie im Beispiel Nr. 6 trennt ein gefloatetes Block-Element allerdings den Text davor und den Text danach. */Beispiel Nr. 8 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein:
Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen.
Oft wird man gar nicht erst gelesen. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.HTML:
<div>Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: <div class="floatDiv doWidth">Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen.</div> Oft wird man gar nicht erst gelesen. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</div>CSS:
div.doWidth {
width: 150px;
}
/* Erst in der Kombination mit einer Breite wird eine Box richtig (sinnvoll) gefloatet und umflossen. */Beispiel Nr. 9 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein:
Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen.
Oft wird man gar nicht erst gelesen. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.HTML:
<div>
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
</div>CSS:
div.redBorder {
border: 5px solid red;
margin: 2px;
padding: 5px;
}
div.redBorder div {
border: 2px solid blue;
text-align: center;
width: 20px;
margin: 2px;
padding: 5px;
}
div.eins {
background-color: yellow;
}
div.sechs {
background-color: green;
color: white;
}
/* Dies stellt die Ausgangssituation für folgende Beispiele dar. Sechs Boxen mit einer definierten Breite, welche im Normalverhalten stets in einer neuen Zeile dargestellt werden.
Auch die rote Umrandung wird das Verhalten von gefloateten Elementen auf die umgebene Box hervorheben. */Beispiel Nr. 10 So sieht's aus:
1
2
3
4
5
6
HTML:
<div class="simpleLeft">
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
</div>CSS:
div.simpleLeft div div {
float: left;
}
/* Hier floaten alle Elemente left, sprich, das ersten fließt links, der restliche Inhalte rechts drumherum. Da auf jedes Element das float: left wirkt, sehen die Elemente wie Inline-Elemente aus.
Deutlich wird hier, dass die umgebene Box ihre Eigenschaft verliert, automatisch die richtige Höhe einzunehmen. */Beispiel Nr. 11 So sieht's aus:
1
2
3
4
5
6
HTML:
<div class="simpleRight">
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
</div>CSS:
div.simpleRight div.redBorder div {
float: right;
}
/* Vergleichbar zu Beispiel Nr. 11, nur das hier die Elemente right gefloatet sind. Kasten 1 fließt rechts, der Rest nach links, dann fließt Kasten 2 nach rechst (aber muss ja links an Kasten 1 umfließen) und auch hier der Rest umfließt Kasten 2 dann links. Und so weiter.
Auch hier verliert die umgebene Box die Höheneigenschaft. */Beispiel Nr. 12 So sieht's aus:
1
2
3
4
5
6
HTML:
<div class="simpleLeft">
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
<div class="sieben">7</div>
</div>
<hr>
<div class="simpleLeft">
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
<div class="sieben floatSieben">7</div>
</div>CSS:
div.sieben {
border: 2px solid black;
width: 20px;
background-color: #C0FF00;
text-align: center;
margin: 2px;
padding: 5px;
}
/* Box 7 ist hinter der Box mit dem roten Rahmen, es kommt allerdings zu merwürdigen Effekten bei der Darstellung der Box. */
div.floatSieben {
float: left;
}
/* Wenn die Box 7 selber ein float bekommt, umfließt sie selber noch die Boxen aus der Box mit dem roten Rahmen. Das float wirkt also nicht nur innerhalb einer Box, sondern kann auf alle folgende Elemente wirken. */Beispiel Nr. 13 So sieht's aus:
1
2
3
4
5
6
7
1
2
3
4
5
6
7
HTML:
<div class="simpleLeft">
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
<div class="sieben floatSieben clearSieben">7</div>
</div>CSS:
div.clearSieben {
clear: left;
}
/* Über das clear wird das float-Verhalten beendet, Box sieben wird in einer neuen Zeile dargestellt und das auch richtig. */Beispiel Nr. 14 So sieht's aus:
1
2
3
4
5
6
7
HTML:
<div class="simpleRight">
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div class="doLeft">3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
</div>CSS:
div.simpleRight div.redBorder div.doLeft {
background-color: #00DEFF;
float: left;
}
/* Alle inneren Boxen floaten rechts wegen der Anweisungen aus Beispiel Nr. 12.
Die Box 3 wird nun links gefloatet und fliegt aus den anderen Boxen raus. */Beispiel Nr. 15 So sieht's aus:
1
2
3
4
5
6
HTML:
<div class="simpleRight">
<div class="redBorder hgPink">
<div class="eins">1</div>
<div>2</div>
<div class="doLeft">3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
</div>CSS:
.hgPink {
background-color: pink;
}
/* Problem ist, das bei wegfallender Höhe des umgebenen Elements auch die Hintergrundfarbe wegfällt. */Beispiel Nr. 16 So sieht's aus:
1
2
3
4
5
6
HTML:
<div class="simpleRight">
<div class="redBorder hgPink">
<div class="eins">1</div>
<div>2</div>
<div class="doLeft">3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
<span class="clearfix"></span>
</div>
</div>CSS:
.clearfix {
clear: both;
display: block;
}
/* Um die Höhe wieder herzustellen, ist ein "clearfix" eine verbreitete Methode:
Vor dem schließendem Tag des DIVs, welche auf die richtige Höhe gezogen werden soll, wird ein HTML-Element eingebaut, welches ein clear: both erhält und damit das float-Verhalten auflöst.
Wird wie in diesem Beispiel ein Inline-Element verwendet, muss dieses als Block-Element deklariert werden, damit es greift. */Beispiel Nr. 17 So sieht's aus:
1
2
3
4
5
6
HTML:
<div class="simpleRight">
<div class="redBorder doClearfix hgPink">
<div class="eins">1</div>
<div>2</div>
<div class="doLeft">3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
</div>CSS:
.doClearfix:after {
content: ' ';
clear: both;
display: block;
text-indent: -10000px;
height: 1px;
}
/* Noch eleganter ist dies mit einen kleinen Kniff zu bewirken: Es wird kein Extra-HTML Element eingefügt, sondern dem umgebenen Element wird über das pseudo-Attribut :after ein Leerzeichen angefügt. Diesem wird per CSS die Eigenschaft eines Block-Elements zugewiesen und dann mit einem clear versehen. Damit es das Layout nicht zerstört, wird es auf eine Höhe von 1px gesetzt und mit einem negativem text-indent aus dem Fokus gezogen. Auch dies ermöglicht dem umgebenen DIV, wieder eine Höhe anzunehmen. */Beispiel Nr. 18 So sieht's aus:
1
2
3
4
5
6
HTML:
<div class="doFloats">
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
<div class="noFloat redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
<div class="doRight redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
<div class="redBorder">
<div class="eins">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="sechs">6</div>
</div>
</div>CSS:
div.doFloats div.redBorder {
float: left;
width: 150px;
}
div.doFloats div.redBorder div {
width: 20px;
float: left;
}
div.doFloats div.noFloat {
border-color: gray;
}
div.doFloats div.noFloat div {
float: none;
}
div.doFloats div.doRight {
border-color: blue;
}
div.doFloats div.doRight div {
float: right;
}
/* Floatet eine umgebene Box selber, ist sie wieder in der Lage, die Höhe automatisch anzunehmen.
In der Box mit dem grauen Rahmen ist das float der inneren Kästchen aufgelöst - jede Box wird in einer neuen Zeile dargestellt. In der Box mit dem blauen Rahmen sind die Kästchen rechts gefloatet.
An der letzen Box mit dem roten Rahmen wird deutlich, wenn eine Zeile neu gestartet wird, liegt diese komplett unterhalt der letzten Zeile. Auch wenn es floatet, nach oben floaten gibt's noch nicht. */Beispiel Nr. 19 So sieht's aus:
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
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!