Elementy pływające – float

Float

Elementy mogą znajdować się po prawej albo lewej stronie, ich rozmieszczenie ustalamy za pomocą float.

selektor { float: wartość; }

Float może przyjmować wartości:

• left – na lewo
• right – na prawo
• none – element nie bedzie pływający (domyślne)

div.blok1 { float: left; width: 100px; background: aqua; }
div.blok2 { float: right; width: 100px; background: blue; }

Przykład

Clear

Właściwość clear używamy w przypadku, gdy elementy pływające na stronie np. obrazki nachodzą na siebie.

selektor { clear: wartość; }

Clear może przyjmować wartość:

• left – element będzie poniżej elementu pływającego, umożliwia opływanie z prawej strony
• right – element będzie poniżej elementu pływającego, umożliwia opływanie z lewej strony
• both – element będzie poniżej elementu pływającego
• none – właściwość nieaktywna (domyślne)

Poniżej w przykładzie blok1 i blok2 mają ustawione opływanie na left – obydwa są obok siebie.

div.blok1 { float: left; width: 100px; background: aqua; }
div.blok2 { float: left; width: 100px; background: blue; }

W kolejnym przykładzie blok2 otrzyma właściwość clear: left – znajdzie się po lewej stronie, pod blokiem1

div.blok1 { float: left; width: 100px; background: aqua; }
div.blok2 { float: left; clear: left; width: 100px; background: blue; }