Teil 1: float
Das float property gibt an ob eine Box nach links, rechts oder gar nicht "floaten" soll.
float: left float: right float: none float: inherit
float kann verwendet werden, um beispielsweise ein Bild von Text umfliessen zu lassen.
inline image, in der gleichen line box wie der text
floated image, text umfliesst das bild
Dokument mit einem floating image erstellen und erfahren, was float: left, resp. float: right macht.
Zeit: 15 - 20 min.
clear ist ein property, dass eng mit float verknüpft ist.
mit clear kann angeben werden, ob ein Element links, resp. rechts von einem floating element positioniert werden kann.
clear: left clear: right clear: both
clear: left definiert, dass das Element nicht rechts von einem floating element gesetzt wird. Die linke Seite wird also gecleared.
Aufgabe: Experimentiere mit dem clear property in diesem Beispiel um zu erfahren, was es macht.
float kann auch verwendet werden, um ganze Seitenlayouts zu definieren.
Aufgabe: Ändere das CSS so, dass der footer unterhalb der Navigation und des Inhalts angezeigt wird.
Beinhaltet eine Box ausschliesslich floatende Elemente, so hat sie keine Höhe:
Es gibt verschiedene Möglichkeiten, das Problem des "great collapse" zu lösen:
Mit den Pseudoselektoren ::before und ::after können mit CSS Elemente erzeugt werden.
Damit können wir ein Element erzeugen, welches den float cleared:
http://jsbin.com/fepehu/1/edit?html,css,output
Genauer wird zu einem späteren Zeitpunkt auf Pseudoelemente eingegangen.