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

Text wrap 

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

Übung

Dokument mit einem floating image erstellen und erfahren, was float: left, resp. float: right macht.

Zeit: 15 - 20 min.

clear

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

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.

http://jsbin.com/panaje/2/edit?html,css,output

Page Layout mit float

float kann auch verwendet werden, um ganze Seitenlayouts zu definieren.

Page Layout mit float

Aufgabe: Ändere das CSS so, dass der footer unterhalb der Navigation und des Inhalts angezeigt wird.

http://jsbin.com/jusase/1/edit?html,css,output

collapsed container elements

Beinhaltet eine Box ausschliesslich floatende Elemente, so hat sie keine Höhe:

http://jsbin.com/jujewo/2/edit?html,css,output

"clearfix"

Es gibt verschiedene Möglichkeiten, das Problem des "great collapse" zu lösen:

• empty div
• overflow property auf parent
• pseudoelement

Pseudoelement

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.