Text um Bilder ließen lassen
und andere Elemente nebeneinander anordnen

float und clear

FLOAT sollte nur in Verbindung mit CLEAR eingesetzt werden. In dem Beispiel kann sehr gut das Kollabieren des Eltern-Elements gezeigt werden, wenn CLEAR nicht den FLOAT beednet. Einfach die Eigenschaft CLEAR im Footer entfernen: Sofort bricht die Höhe des Eltern-Elements zusammen.

Erklärung und Beispiele

CSSZusammenfassungInfoWerteBeispiel
float:Nimmt das Element aus dem normalen Fluss heraus und platziert es entweder auf der linken oder rechten Seite des Eltern-Elements. Die anderen Inhalte umfließen es.Ursprünglich ist FLOAT für den Umfluss von Texte um Bilder gemacht worden. Im Laufe der Zeit hat es sich als Methode entwickelt komplexere Layouts zu gestalten. Je nachdem welche Browser-Bandbreite unterstützt werden soll, spielt es noch heute in dieser Hinsicht eine Rolle. Kann man für neuere Browser gestalten, dann bietet display: FLEX auf jeden Fall mehr Möglichkeiten. In der Mircro-Ebene (Text und Bilder) ist FLOAT immer noch ein wesentliches Gestaltungselement im Webdesign. FLOAT aktiviert den Fluss der folgenden Elemente nach rechts oder links. Technisch gesehen wird das "gefloatete" Element auf einen anderen Layer im Browser geschoben. Seine Art die Höheninformation auszugeben wird dadurch geändert. Die Höhe des Eltern-Elements kann zusammenbrechen (kollabieren). Texte und Bilder üben allerdings ihre tatsächliche Höhe aus insofern sie die Eigenschaft FLOAT haben. Während die Höhen von Flächen kollabieren, so bleibt der Text mitunter an der ursprünglichen Stelle. Dies führt zu kuriosen Situationen. Dieses Verhalten ist in der Geschichte von FLOAT begründet. FLOAT war halt niemals für moderne Layouts gedacht und geplant. Das Verhalten kann nur mit CLEAR kontrolliert werden. Benutzt man also FLOAT, benötigt man fast immer auch CLEAR. Anzumerken bei FLOAT ist, dass man sich neben CLEAR bei der Konzeption auch Gedanken zu den Höhen der Elemente machen muss. Gleiche Höhen funktionieren am Besten. left; right; none; inheritfloat: left; float: right;
clear:Beendet den FLOAT.CLEAR beendet entweder den beidseitigen (both), linken (left) oder rechten (right) FLOAT. Clear verhindert das bei dem Eltern-Element mit gefloateten Kindern die Höhe kollabiert. Die Eigenschaft CLEAR bekommt immer das folgende Element, welches nicht mehr "floaten" soll.left; right; both; none; inherit;clear: both; clear: right;

frageantwort
Warum verschwindet der Footer wenn man den Befehl Clear löscht?Er wird eher unsichtbar. Die Höhe des Eltern-Element kollabiert ohne Float. Er rutscht im Hintergrund der geflochtene Kinder direkt unter den Header.
Entferne mal im Footer den Befehl clearfooter { background: #444; height: 20px;}
Ändere mal float:left auf Float right;float:right
clearfix

Anstatt für jeden FLOAT ein passendes CLEAR-Element zu suchen, können wir uns mit der CLEARFIX Methode die Arbeit deutlich erleichtern.

Erklärung und Beispiele

CSSZusammenfassungInfoWerteBeispiel
.clearfixCLEARFIX ist eine populäre Methode für das praktische Zuweisen von CLEAR mit Hilfe von des ::AFTER-Pseudo-Elements.Anstatt im HTML ein Element mit der Eigenschaft CLEAR einzubauen fügen wir das benötigte CLEAR mit einer CSS-Klasse ein. Der Begriff CLEARFIX hat sich dafür eingebürgert und wird in sehr vielen Projekten und Templates verwendet. Mittlerweile ist CLEARFIX mehr Container-Begriff für eine Vielzahl an Ansätzen für dieses Prinzip. Alle CLEARFIX-Methoden bauen auf dem Prinzip des Pseudo-Element auf. Es können ::BEFORE und ::AFTER zugewiesen werden. Wir nutzen in der traditionellen CLEARFIX Methode ::AFTER. Es wird so als Inhalt hinter dem Eltern-Element des FLOAT-Inhalt ein Punkt (.) eingefügt der eine neue Zeile erzwingt (display: block.) Der Punkt hat die Eigenschaft CLEAR. Damit man das Element nicht sieht bekommt er eine Höhe von 0 und die Farbe transparent.content: "."; display: block; clear: both; height: 0; color: transparent;.clearfix::after {content: "."; display: block; clear: both; height: 0; color: transparent;}
float:Nimmt das Element aus dem normalen Fluss heraus und platziert es entweder auf der linken oder rechten Seite des Eltern-Elements. Die anderen Inhalte umfließen es.Ursprünglich ist FLOAT für den Umfluss von Texte um Bilder gemacht worden. Im Laufe der Zeit hat es sich als Methode entwickelt komplexere Layouts zu gestalten. Je nachdem welche Browser-Bandbreite unterstützt werden soll, spielt es noch heute in dieser Hinsicht eine Rolle. Kann man für neuere Browser gestalten, dann bietet display: FLEX auf jeden Fall mehr Möglichkeiten. In der Mircro-Ebene (Text und Bilder) ist FLOAT immer noch ein wesentliches Gestaltungselement im Webdesign. FLOAT aktiviert den Fluss der folgenden Elemente nach rechts oder links. Technisch gesehen wird das "gefloatete" Element auf einen anderen Layer im Browser geschoben. Seine Art die Höheninformation auszugeben wird dadurch geändert. Die Höhe des Eltern-Elements kann zusammenbrechen (kollabieren). Texte und Bilder üben allerdings ihre tatsächliche Höhe aus insofern sie die Eigenschaft FLOAT haben. Während die Höhen von Flächen kollabieren, so bleibt der Text mitunter an der ursprünglichen Stelle. Dies führt zu kuriosen Situationen. Dieses Verhalten ist in der Geschichte von FLOAT begründet. FLOAT war halt niemals für moderne Layouts gedacht und geplant. Das Verhalten kann nur mit CLEAR kontrolliert werden. Benutzt man also FLOAT, benötigt man fast immer auch CLEAR. Anzumerken bei FLOAT ist, dass man sich neben CLEAR bei der Konzeption auch Gedanken zu den Höhen der Elemente machen muss. Gleiche Höhen funktionieren am Besten. left; right; none; inheritfloat: left; float: right;
clear:Beendet den FLOAT.CLEAR beendet entweder den beidseitigen (both), linken (left) oder rechten (right) FLOAT. Clear verhindert das bei dem Eltern-Element mit gefloateten Kindern die Höhe kollabiert. Die Eigenschaft CLEAR bekommt immer das folgende Element, welches nicht mehr "floaten" soll.left; right; both; none; inherit;clear: both; clear: right;

float im Layout

Mit FLOAT und CLEAR können ansprechende Layouts umgesetzt werden. FLOAT funktioniert besser in Layouts mit festen Vorgaben für die Höhe. Dies beinhaltet auch Vorgaben für maximale Längen von Text. Der CLEAR erfolgt mit der CLEARFIX Methode bei jedem ARTICLE. In diesem Beispiel wird mit Hilfe der CSS-Pseudoclass "NTH-OF-TYPE(n)" die Richtung der FLOATS und Hintergrundfarbe automatisch abgewechselt.

Erklärung und Beispiele

CSSZusammenfassungInfoWerteBeispiel
.clearfixCLEARFIX ist eine populäre Methode für das praktische Zuweisen von CLEAR mit Hilfe von des ::AFTER-Pseudo-Elements.Anstatt im HTML ein Element mit der Eigenschaft CLEAR einzubauen fügen wir das benötigte CLEAR mit einer CSS-Klasse ein. Der Begriff CLEARFIX hat sich dafür eingebürgert und wird in sehr vielen Projekten und Templates verwendet. Mittlerweile ist CLEARFIX mehr Container-Begriff für eine Vielzahl an Ansätzen für dieses Prinzip. Alle CLEARFIX-Methoden bauen auf dem Prinzip des Pseudo-Element auf. Es können ::BEFORE und ::AFTER zugewiesen werden. Wir nutzen in der traditionellen CLEARFIX Methode ::AFTER. Es wird so als Inhalt hinter dem Eltern-Element des FLOAT-Inhalt ein Punkt (.) eingefügt der eine neue Zeile erzwingt (display: block.) Der Punkt hat die Eigenschaft CLEAR. Damit man das Element nicht sieht bekommt er eine Höhe von 0 und die Farbe transparent.content: "."; display: block; clear: both; height: 0; color: transparent;.clearfix::after {content: "."; display: block; clear: both; height: 0; color: transparent;}
float:Nimmt das Element aus dem normalen Fluss heraus und platziert es entweder auf der linken oder rechten Seite des Eltern-Elements. Die anderen Inhalte umfließen es.Ursprünglich ist FLOAT für den Umfluss von Texte um Bilder gemacht worden. Im Laufe der Zeit hat es sich als Methode entwickelt komplexere Layouts zu gestalten. Je nachdem welche Browser-Bandbreite unterstützt werden soll, spielt es noch heute in dieser Hinsicht eine Rolle. Kann man für neuere Browser gestalten, dann bietet display: FLEX auf jeden Fall mehr Möglichkeiten. In der Mircro-Ebene (Text und Bilder) ist FLOAT immer noch ein wesentliches Gestaltungselement im Webdesign. FLOAT aktiviert den Fluss der folgenden Elemente nach rechts oder links. Technisch gesehen wird das "gefloatete" Element auf einen anderen Layer im Browser geschoben. Seine Art die Höheninformation auszugeben wird dadurch geändert. Die Höhe des Eltern-Elements kann zusammenbrechen (kollabieren). Texte und Bilder üben allerdings ihre tatsächliche Höhe aus insofern sie die Eigenschaft FLOAT haben. Während die Höhen von Flächen kollabieren, so bleibt der Text mitunter an der ursprünglichen Stelle. Dies führt zu kuriosen Situationen. Dieses Verhalten ist in der Geschichte von FLOAT begründet. FLOAT war halt niemals für moderne Layouts gedacht und geplant. Das Verhalten kann nur mit CLEAR kontrolliert werden. Benutzt man also FLOAT, benötigt man fast immer auch CLEAR. Anzumerken bei FLOAT ist, dass man sich neben CLEAR bei der Konzeption auch Gedanken zu den Höhen der Elemente machen muss. Gleiche Höhen funktionieren am Besten. left; right; none; inheritfloat: left; float: right;
clear:Beendet den FLOAT.CLEAR beendet entweder den beidseitigen (both), linken (left) oder rechten (right) FLOAT. Clear verhindert das bei dem Eltern-Element mit gefloateten Kindern die Höhe kollabiert. Die Eigenschaft CLEAR bekommt immer das folgende Element, welches nicht mehr "floaten" soll.left; right; both; none; inherit;clear: both; clear: right;

► Weitere Infos

float-clear

Positions, Float und Clear Microsite

▼ Download der Microsite

In der Microsite sind die Positions, z-index, sowie Float, Clear bei der Nutzung dieser Eigenschaften anschaulich dargestellt. Es ist hilfreich wenn Du dir die Kommentare im Quellcode ansiehst. Diese Inhalte in "Aktion" zu sehen ist eine sehr gute Ergänzung neben der Erklärung im Skript und Unterricht sowie den Editoren hier auf der CODE Plattform.


Float, Clear und die Positions ermöglichen sehr viel im Layout. Sie sind seit Jahren bewährt und voll durch die Browser unterstützt. Es können bei der Nutzung typische Probleme entstehen, diese sind in der Microsite eingebaut.


Externe Quellen

Kompatibilität

Float und Clear werden seit langer Zeit von den üblichen Browsern voll unterstützt.


W3C CSS Visual formatting model
9.5 Float und Clear

http://www.w3.org/(...)visuren.html#floats

Original Definition von Float und Clear der W3C.


selfhtml.wiki

http://wiki.selfhtml.org.wiki(...)float

http://wiki.selfhtml.org/wiki(...)clear

Ausführliche Beschreibungen in deutscher Sprache.


Theorie hinter Float

http://css-technik.de/css-examples/219_9/

Der folgende Text bei CSS-Technik.de ist die Übersetzung des Artikels "Float: The Theory", von Big John und Holly Bergevin.


Clearfix

http://h5c3.de/(...)float-aufloesen-clearfix/

Es ist sehr populär mit einer Klasse, meist Clearfix genannt, Clear zu regeln. Dabei wird ein "unsichtbares" pseudo-element automatisch platziert. In dem Artikel gibt es dazu weitergehende Infos.