float

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

        
          
          .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 используется только для «обтекания».