Float

• Значения:  left | right | none | inherit
• Элемент при наличии float получает display:block
• Строчные элементы, расположенные после зафлоаченного блока, обтекают его со свободной стороны
• Блочные элементы подтягиваются вверх и занимают место зафлоаченного блока

Схлопывание родительского блока

Как пофиксить?

• Добавить в родительский элемент <div style="clear: both;"></div>
• Установить родительскому элементу свойство overflow: hidden;
• Использовать псевдо-селектор :after

Clearfix

display: inline-block

• можно задавать размеры, рамки и отступы
• ширина зависит от содержания блока
• располагаются на одной строке
• работает вертикальное выравнивание

Как убрать пробелы?

Решение:

• использовать отрицательный внешний отступ
• не использовать закрывающий тег
• сбрасывать размер шрифта

Пример: