Плавающие элементы в CSS

Элементы, к которым применено свойство float, получили название "Плавающие".

Свойство применимо ко всем элементам, кроме позиционированных.

Но не смотря на это свойство float совместно со свойством clear по своему влияют на позиционирование элементов на странице.



Свойство float - Обтекание элементов

В основном плавающие элементы применяются при обтекании какого-либо объекта (рисунок, изображение, текст в рамке и т.д.) текстом.

Плавающий объект смещается влево или вправо (значения left и right свойства float соответственно), а текст располагается на свободной стороне. Но не обязательно текст: это может быть все что угодно.

Значение none является значением по умолчанию для свойства float. При этом свойство никак себя не проявляет: элементы располагаются в привычном для всех порядке.

Расположение элементов по горизонтали

Также свойство float используется, когда необходимо расположить рядом несколько элементов.

Рассмотрим пример, когда три абзаца необходимо разместить рядом друг с другом в горизонтальной плоскости. Естественно, содержимое абзацев может быть любым.

Напомним, что абзац (тег <p>) - это блочный элемент. И по умолчанию абзацы располагаются друг под другом.

Как видите, четвертый абзац обтекает расположившиеся в ряд абзацы: для третьего абзаца задано значение left свойства float и, следовательно, часть последующего текста располагается на свободной стороне - справа.

Но что делать, если необходимо чтобы в данном примере только три элемента располагались на одной строке? К тому же для содержимого четвертого абзаца явно не хватает места.

Можно конечно пропорционально увеличить ширину каждого из абзацев или сделать шире один из них так, чтобы их общая ширина занимала все свободное пространство, и для следующих элементов не оставалось бы места.

Но существует иной вариант...

Свойство clear - Отменяем обтекание

Есть возможность отменить обтекание плавающего элемента.

Свойство clear вносит такую поправку.

Свойство применимо к блочным и плавающим элементам.

В нашем примере необходимо для четвертого абзаца свойству clear присвоить значение left, то есть отменить обтекание плавающего элемента (третьего абзаца), смещенного влево с помощью свойства float.

Соответственно значение right свойства clear отменяет обтекание элемента, смещенного вправо с помощью свойства float, а значение both вносит запрет на обтекание элемента, смещенного в любую сторону с помощью свойства float.

Значение по умолчанию none отменит действие свойства clear.