float

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство помогает «обтекать» блоки текстом.

Пример

Секция статьи "Пример"
        
          
          .block__img {  float: right;}
          .block__img {
  float: right;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как это понять

Секция статьи "Как это понять"

Иногда при вёрстке блока нужно, чтобы текст рядом с картинкой занимал всё оставшееся место, а после картинки располагался на всю ширину блока. Для таких ситуаций и создан float. Элемент, для которого указано это свойство, частично выходит из потока: все элементы блочного контекста, прописанные в коде после элемента с float, занимают его место, а элементы строчного контекста — «обтекают» его.

Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"
        
          
          .element {  float: left;}
          .element {
  float: left;
}

        
        
          
        
      

В файле стилей пишем селектор элемента, который будем «обтекать», и указываем одно из трёх значений свойства:

  • left — элемент встанет у левого края родительского блока.
  • right — элемент встанет у правого края родительского блока.
  • none — значение по умолчанию, элемент останется в потоке.

Если мы задаём какому-то элементу свойство float и пишем к нему, скажем, абзац текста, а ниже добавляем ещё один абзац, который по задумке должен быть независимым, то второй абзац всё ещё может «обтекать» элемент с float. Поэтому нам нужно прекратить влияние этого свойства, чтобы вернуться к обычному потоку документа. Для этого можно использовать так называемый «clearfix». После элемента, на котором мы хотим прекратить обтекание, можно вставить пустой элемент, обычно с классом clearfix, и прописать свойство clear:

        
          
          .clearfix {  clear: both;}
          .clearfix {
  clear: both;
}

        
        
          
        
      

Также можно не вставлять отдельный элемент в разметку, а обойтись псевдоэлементом ::after — этот вариант предпочтительнее.

Открыть демо в новой вкладке

Несколько лет назад для похожей цели появилось значение flow-root для свойства display — оно как бы изолирует обтекание. Достаточно применить его к блоку, внутри которого есть элемент с float — и влияние float не будет распространяться вне этого блока. А относительно соседей он будет вести себя как обычный блочный элемент со статичным позиционированием.

Открыть демо в новой вкладке

Также для подобной изоляции можно указать блоку свойство overflow: hidden. Отличие состоит в том, что flow-root позволяет использовать свойство overflow: visible.

Подсказки

Секция статьи "Подсказки"

💡 Применяя float к элементу, мы неявно делаем его блочным.

На практике

Секция статьи "На практике"

Лена Райан советует

Секция статьи "Лена Райан советует"

🛠 float не предназначен для создания сеток или табличной раскладки! Раньше не было другого способа разбить контент на колонки и поставить их рядом друг с другом. Но сейчас для этого есть флексы и гриды, а float используется только для «обтекания».