Обтекание элементов

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

Обтекание устанавливается с помощью свойства float. Значения свойства:

float: left; - элемент смещается влево, другие элементы обтекают его справа

float: right; - элемент смещается вправо, другие элементы обтекают его слева

float: none; - отмена обтекания

float: inherit; - значение принимается от родительского элемента

Пример использования свойства float - это обтекание картинки текстом. Выглядит это так:

Взрослый лев имеет вес в среднем до 250 килограмм при длине туловища около 2,5 м. Гибкое, подвижное тело льва обладает отлично развитой мускулатурой шеи и передних лап. Когти льва достигают в длинну 7 см. Массивная голова льва с вытянутой мордой имеет сильные челюсти. У льва 30 зубов, клыки размером до 8 см позволяют ему охотиться на достаточно крупных животных: косуль, кабанов, зебр и антилоп.

Чтобы сделать такое обтекание, картинку нужно поместить в абзац или другой блок и установить ей свойство float.

Стиль:

img
  {
  float:left;
  }

HTML код:

<p style="width: 400px">
<img src="lev.jpg" width="170">
Взрослый лев имеет вес в среднем
до 250 килограмм при длине туловища около 2,5 м. Гибкое,
подвижное тело льва обладает отлично развитой мускулатурой шеи
и передних лап. Когти льва достигают в длинну 7 см. Массивная
голова льва с вытянутой мордой имеет сильные челюсти. У льва 30
зубов, клыки размером до 8 см позволяют ему охотиться на
достаточно крупных животных: косуль, кабанов, зебр и антилоп.</p>

Элементы со свойством float имеют ряд особенностей:

• Не влияют на высоту внешнего контейнера
• Если размеры не установлены, то блоки имеют ширину по содержимому
• Если элементов несколько, то они распологаются в строку
• Блоки, следующие за элементом с float, не обращают на него внимания и занимают его место. А строковые элементы учитывают элемент с float и располагаются за ним

Для примера добавим на страницу блок и установим ему свойство float. Создадим ещё несколько блоков и посмотрим, как они будут размещаться. Они должны быть шире первого блока.

Стиль:

#red 
  {
  float:left; 
  height: 80px; 
  width: 50px; 
  background-color: Red; 
  }
#gr
  {
  height: 50px;
  width: 70px;
  background-color: Green;
  }
#bl
  {
  height: 50px;
  width: 70px;
  background-color: Blue;
  }
#gray
  {
  height: 50px;
  width: 70px;
  background-color: Gray;
  }
#yel
  {
  height: 50px;
  width: 70px;
  background-color: Yellow;
  }

HTML код:

<div id="red"></div>
<div id="gr"></div>
<div id="bl"></div>
<div id="gray"></div>
<div id="yel"></div>

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

float:left;

Теперь добавим это свойство ещё и синему блоку:

float:left;

Чтобы контент, следующий за элементами с float не перемещался на их место, можно поместить эти элементы во внешний контейнер и задать ему высоту. Если высота заранее не известна, то контейнеру можно установить свойство overflow со значением hidden или auto. Тогда элементы с float влияют на высоту контейнера.

Иногда говорят, что элементы со свойством float выпадают из основного потока документа, как при позиционировании. Но рассмотренный приём, доказывает, что это не так.

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