Плавающие элементы. Свойство float

Плавают элементы, определенные тегами, для которых в CSS задано свойство float.

float: left | right | none; 
/* Прим. если значение none - то элемент не плавающий *

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

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

Применение свойства float позволяет располагать блоки горизонтально, рядом друг с другом (элемент с заданным значением float автоматически становится блочным), что дает нам большие возможности при макетировании страницы.

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

Проще понять на примере:

Сюрприз 1. У содержащего блока исчез фон.

Контейнер-обертка, которому не задана высота, схлопнулся (горизонтальная черта над блоками - слившиеся верхняя и нижняя линии рамки), т.к. все содержащиеся в нем блоки плавающие, а значит их нет в общем потоке и отношение к ним соответствующее - как к пустому месту.

Достаточно распространенная проблема при верстке :)

Существует несколько решений.

1. Сделать содержащий контейнер-обертку тоже плавающим, задав для него свойство float. Тогда он будет относится к вложенным блокам как к "своим". Большое количество плавающих элементов может значительно усложнить верстку.

2. Установить контейнеру-обертке свойство overflow: hidden | auto. Это свойство влияет на поведение контейнера, поэтому возможны побочные эффекты.

3. Очистка с помощью свойства clear: both | left | right. Для этого должен быть элемент, следующий за плавающими блоками, которому это свойство можно было бы присвоить, например параграф p или блок div.

 Создавать с целью очистки дополнительную разметку - тоже не самое хорошее решение.

4. Очистка с помощью псевдоэлемента :after.

.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
  clear: both;
}

Осталось присвоить этот класс контейнеру обертке

<div class="clearfix"> ... </div>

 и мы получим вместо реального блочного элемента, псевдоэлемент очистки. 

Сюрприз 2. Сползание блоков вниз, которым надлежит располагаться горизонтально.

Третий блок не поместился по горизонтали и был перенесен вниз. Но "зацепился" за первый блок и пристыковался к его правой кромке. Почему?

Суммарный размер ширины блоков + отступы + рамки превышает ширину содержащего блока или страницы. 

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

Всегда старайтесь явно задавать размеры плавающим контейнерам. 

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