Перейти к содержанию

Энциклопедия CSS: float

Материал из Викижурнал
CSS: float
Тематические порталы
Портал CSS • Портал Веб-разработчиков

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

Свойство появилось в CSS прежде всего для оформления изображений, иллюстраций и небольших боковых блоков внутри текста. Раньше float часто использовали для построения целых макетов страниц, но в современной вёрстке для раскладки обычно применяют flex и grid.

Синтаксис

selector {
  float: значение;
}

Пример: 

.image {
  float: left;
}

В этом случае элемент будет прижат к левому краю, а текст рядом начнёт обтекать его справа.

Основные значения

Свойство float поддерживает несколько значений:

  • left — элемент прижимается к левому краю;
  • right — элемент прижимается к правому краю;
  • none — обтекание не применяется;
  • inline-start — элемент прижимается к началу строки с учётом направления письма;
  • inline-end — элемент прижимается к концу строки с учётом направления письма.

На практике чаще всего используются значения left, right и none.

Обтекание изображения текстом

Один из классических примеров использования float — размещение изображения внутри текстового блока: 

.article-image {
  float: right;
  width: 220px;
  margin: 0 0 16px 20px;
}

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

Отступы важны: без margin текст будет слишком близко подходить к изображению.

Живой пример

CSS: свойство float
HTML
CSS
Результат

Проблема с высотой контейнера

Плавающий элемент выходит из обычного потока документа. Из-за этого родительский блок может «схлопнуться», если внутри него находятся только элементы с float.

Пример проблемы: 

<div class="gallery">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

.item {
  float: left;
  width: 120px;
}

В такой ситуации высота контейнера .gallery может стать нулевой, потому что плавающие элементы не учитываются как обычные дочерние блоки.

Очистка обтекания

Чтобы следующий элемент начинался ниже плавающих блоков, используют свойство clear: 

.after-float {
  clear: both;
}

Значение both запрещает обтекание и слева, и справа.

Также часто используют приём clearfix: 

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Он помогает родительскому контейнеру учитывать высоту плавающих элементов.

float и современные макеты

Свойство float не стоит использовать для основной структуры страницы: колонок, сеток, карточек, шапки сайта или сложных адаптивных блоков. Для таких задач лучше подходят:

  • display: flex — для рядов, колонок и выравнивания элементов;
  • display: grid — для сеток и сложных раскладок;
  • position — для точного позиционирования отдельных элементов.

float остаётся уместным там, где нужно именно обтекание текстом: изображение в статье, небольшая иллюстрация, цитата или заметка внутри текстового материала.

Практические советы

Используйте float только тогда, когда нужен эффект обтекания. Если задача состоит в размещении блоков рядом, лучше начать с flexbox или grid.

Для плавающих изображений почти всегда нужны отступы: 

.image-left {
  float: left;
  margin: 0 20px 16px 0;
}

.image-right {
  float: right;
  margin: 0 0 16px 20px;
}

После блока с float проверяйте, не налезает ли следующий раздел на плавающий элемент. Если налезает, добавьте clear: both; или используйте clearfix.

Статьи про другие свойства CSS

Источники

Источник — https://ru.wikijournal.org/w-wiki/index.php?title=Энциклопедия_CSS:_float&oldid=15324