3

kurs

css

Lekcja 12: Elementy pływające - float

css

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.

comments powered by Disqus

Do góry