Свойство float

Свойството float - задава плаващи елементи, които ще се обвиват от текст. Свойството float понякога се използва заедно със свойството clear, което спира обвиването на елемента.

Въпреки че първоначално float е било създадено за вмъкване на плаващи елементи в текст, в момента се използва много широко и нестандартно за изграждане на оформления.

Синтаксис

cssселектор {
  float: left | right | none;
}

cssселектор {
  clear: both | left | right | none;
}

Стойности за float

Стойност	Описание
`left`	Елементът ще плава отляво, а текстът ще се обвива около него отдясно.
`right`	Елементът ще плава отдясно, а текстът ще се обвива около него отляво.
`none`	Няма обвиване.

Стойност по подразбиране: none.

Стойности за clear

Стойност	Описание
`left`	Спира обвиването отляво.
`right`	Спира обвиването отдясно.
`both`	Спира обвиването както отляво, така и отдясно.
`none`	Няма спиране на обвиването.

Стойност по подразбиране: none.

Пример

Използваме float нестандартно, като поставим елементите от списъка в линия:

html<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

cssli {
  float: left;
  border: 1px solid red;
}

Результат:

Вижте също

свойство clear,
което спира float за горните елементи