Float — самое страшное свойство для новичка в HTML. Именно потому, что c float не умеют работать. Float переводится как «всплытие». Из доступных значений этого свойства можно выбрать:

Давайте посмотрим, что происходит с элементами, когда к ним применяется свойство float:

• Элемент «сплывает» и прижимается к левому (если float: left) или правому (float: right) краю родительского элемента или элемента которому тоже задано значение float
• Если элемент из-за ширины родительского блока не может встать в один ряд с другим элементом, он будет сдвинут вниз до того момента пока ему не хватит места
• Другие блочные элементы для которых значение float не задано ведут себя так, как будто элемента с float нет на странице (элемент «сплыл»). Строки «знают» что элемент всплыл и обтекают его
• Ширина блока, для которого задано значение float — определяется по содержимому.

Рассмотрим пример. Удалите комментарий у свойства float: left внутри CSS. Посмотрите на результат.

See the Pen float by Alex (@Asmodey) on CodePen.

Замените float:left на float: right.

Свойство float удобен для обеспечения обтекания картинок текстом. Рассмотрите пример:

See the Pen float by Alex (@Asmodey) on CodePen.

Добавьте комментарий в строку CSS файла к свойству float: left. Просмотрите как изменится верстка страницы. Замените float: left на float:right.

«Схлопывание» родительского элемента при наличии у вложенных элементов свойства float

Пусть внутрь элемента one помещен элемент two. По-умолчанию, высота one растянется по содержимому. Как только мы к элементу two применим свойство float, он всплывает, и родительский элемент one не будет знать что two существует. Если содержимого у two нет, то его высота равна нулю. Такое поведение называется «схлопывание». Чтобы предотвратить схлопывание родителя ему задают либо свойство min-height — минимальная высота, либо применяют способ: добавляют еще один блок, для которого задают свойство:

Данный блок не виден на странице, но свойство clear:both снимает обтекание элементов и растягивает родителя на высоту содержимого.

Снимите комментарий свойству float:left в CSS. Посмотрите как ведет себя родительский элемент:

See the Pen float by Alex (@Asmodey) on CodePen.

Рассмотрите пример с применением clear: both

See the Pen float: clear both by Alex (@Asmodey) on CodePen.

Итак вы ознакомились с основными свойствами float. Давайте применим знания на практике.

Смотрите статью — как прижать футер к нижней части сайта: 2 простых способа.