Если свойство элемента с float установлено right или left:
- Элемент отображается как блочный, так словно ему установлено свойство display: block;
- Элемент по ширине сжимается до размеров содержимого, если для элемента явно не установлена ширина width;
- Элемент прилипает к левому (left) или правому краю (right);
- Все остальное содержимое страницы, идущее в HTML коде после элемента с float, обтекает его;
Плавающий (тот, который с float) элемент обтекают только те элементы, которые идут в HTML коде после него.
Блоки с float по умолчанию не влияют на высоту родителя, то есть если у
вас есть некоторый контейнер (display: block), а в нем находятся только плавающие блоки,
то высота контейнера станет равна нулю (и блоки выпадут). Поэтому необходимо явно задавать высоту контейнера.
Или Решение #2. Добавить пустой блок с clear: both.
Добавление подобного элемента отчищает «плавучесть» блоков и заставляет
контейнер растягиваться на всю высоту. Семантически это не самое лучшее
решение, так как вводит лишний элемент разметки.
Или Решение #3. Применить свойство overflow (свойство overflow управляет отображением содержания
блочного элемента, если оно целиком не помещается и выходит за область заданных
размеров): auto (полосы прокрутки добавляются только при необходимости) или hidden (отображается только область внутри элемента, остальное будет скрыто) к контейнеру.
Заставляет контейнер заново рассчитать высоту и изменить ее так, чтобы
включать плавающие элементы, иначе ему бы пришлось добавить полосу
прокрутки или скрыть их.
Всё дело в так называемом «контексте» или «контексте форматирования»,
такие правила как display и overflow создают этот контекст, и согласно
правилам он (созданный контекст) не может пересекаться с флоатами. Что
вобщем и происходит. В результате блок занимает все доступное
пространство кроме флоата.
А вот внутристрочные боксы (display: inline-block) присутствие float-ов чувствуют. В
отличие от блочных боксов, они никогда не пересекаются границами с
float-ом. Они — тот самый контент, которому положено «обтекать float
вдоль одной стороны».
Ширина строчных боксов, соседствующих с float-ом, зависит от ширины
float-а — а значит, используя float-ы разной ширины, можно сделать
границу текста ступенчатой и придать ей самый причудливый контур.
Свойство clear
Все значения [свойства clear], кроме 'none', потенциально вводят клиренс (clearance - просвет).
Клиренс препятствует схлопыванию margin-ов и действует как промежуток
над верхним margin-ом элемента. Он служит для «выталкивания» элемента по
вертикали ниже float-а.
Клиренс добавляет над блоком столько места, сколько нужно, чтобы блок оказался под самым высоким float-ом c соотв. стороны в текущем блочном контексте.
Источники: http://habrahabr.ru/post/136588/ и http://habrahabr.ru/post/136622/
