CSS Float

Что такое CSS Float (плавающий)?

CSS float перемещает элемент влево или вправо, а окружающие его элементы также перестраиваются.

Float часто используется для изображений, но также очень полезен при вёрстке.

Как плавают элементы

Горизонтальное плавание элемента означает, что элемент может двигаться только влево или вправо, но не вверх или вниз.

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

Элементы после плавающего элемента будут обтекать его.

Элементы перед плавающим элементом не будут затронуты.

Если изображение смещено вправо с помощью float, следующий текст будет обтекать его слева:

Плавающие элементы рядом друг с другом

Если разместить несколько плавающих элементов вместе, они будут располагаться рядом друг с другом, если есть место.

Здесь мы используем свойство float для галереи изображений:

Очистка плавающих элементов — использование clear

После того как элемент становится плавающим, окружающие элементы перестраиваются. Чтобы избежать этого, используйте свойство clear.

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

Добавьте галерею изображений к тексту с помощью свойства clear:

Другие примеры

Добавьте к изображению границу и внешний отступ и задайте для него обтекание справа от абзаца.

Давайте добавим к изображению границу и внешний отступ и зададим для него обтекание справа от абзаца.

Заголовок и изображение обтекают справа

Задайте для заголовка и изображения обтекание справа.

Сделайте первую букву абзаца обтекаемой слева

Измените стиль так, чтобы первая буква абзаца обтекалась слева.

Создание веб-страницы без таблиц

Используйте float, чтобы создать шапку, подвал, левый контент и основной контент веб-страницы.

Все свойства float в CSS

Числа в столбце "CSS" указывают на различные версии CSS (CSS1 или CSS2), в которых определено это свойство.