float

Блочная модель

Атрибут float

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

Свойство float позволяет перемещать любой элемент, выравнивая его по левому или правому краю веб-страницы или содержащего его элемента-контейнера

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

float:	comment
none	Значение по умолчанию Также отменяет любое перемещение для элемента из группы элементов, для которых уже установлено обтекание
left	Элемент изымается из нормального потока элементов и позиционируется по левому краю блока-контейнера
right	Элемент позиционируется по правому краю блока-контейнера

В примере показано обтекание картинки текстом, а заодно еще раз - как работает vertical-align

---

clearfix

Очистка потока стилями при помощи класса clearfix и псевдокласса :after

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}