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
Blok1 po lewej stronie.
Blok2 po prawej stronie.
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; }
Blok1 po lewej stronie.
Blok2 po obok bloku 1.
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; }
Blok1 po lewej stronie.
Blok2 pod blokiem1.