Введение §

Свойство#float помогает «обтекать» блоки текстом.

float: left | right | none | inherit;

При применении этого свойства происходит следующее:

1. Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left) или вправо (для right) до того как коснётся либо границы родителя, либо другого элемента с float.
2. Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
3. Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
4. Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.

Ещё детали:

1. Элемент при наличии float получает display:block.

   То есть, указав элементу, у которого display:inline свойство float: left/right, мы автоматически сделаем его блочным. В частности, для него будут работать width/height.

   Исключением являются некоторые редкие display наподобие inline-table и run-in (см. Relationships between „display“, „position“, and „float“)

2. Ширина float-блока определяется по содержимому.

3. Вертикальные отступы margin элементов с float не сливаются с отступами соседей, в отличие от обычных блочных элементов.

Проблемы при вёрстке флоатом. Распорка §

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

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

! Float вырывает элемент из нормального потока документа и формирует для него новый, а это значит, что другие элементы перестают его видеть.

Представим, у нас есть 3 тега, первому добавим float: left, а второму float: right, третий тег перестал их видеть и занял их место – это объясняет механизм перепрыгивания.

Если закомментировать 3 элемент, произойдёт так, что 1 и 2 теги на своих местах, но родительский элемент этой высоты не видит, происходит схлопывание родителя, из-за этого механизма  основной контент подлазил под плавающие элементы.

Для решения этой проблемы были придуманы решения:

1. Родителю можно было задать overflow: auto (он расхлопывался и визуально начинал оборачивать плавающие элекменты)
2. Добавлялся пустой элемент, ему добавлялось свойство clear: both (но это плохо, т.к добавлялся ненужный элемент – это плохо для семантики и чистоты кода)
3. Финальная версия – cleatfix (3 свойства, которые заставляли родителя расхлопываться)

Внутри родителя создавался псевдоэлемент :after, после чего задавалось его отображение (display: block) и то же свойство clear: both, по сути за основу был взят подход создания пустого элемента очистки потока, только создавался он не в HTML, а в CSS, было правильно, если создаем float какому-либо элементу, необходимо создать clear fix для родителя, чтобы очистить поток. Свойство clear имеет 4 значения: 1. Both – очистка с обоих сторон 2. Left – очистка слева 3. Right – справа 4. None – очистка отменяется.

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

Блочным элементам нужно задавать ширину, нужно очень внимательно просчитывать размер. (адаптация)

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

Float не всегда удобен: например при верстке сетки с изображением. Иногда уместно применять inline-block, который имитирует поведение float’а.

Девять правил float-элементов: §

1. Плавающие элементы не могут выходить за край своего контейнера-родителя.
2. Каждый плавающий элемент будет отображаться справа или ниже от предыдущего при float:left, либо слева и ниже, при float:right.
3. Блок с float:left не может быть правее, чем блок с float:right.
4. Плавающий элемент не может выходить за пределы верхней границы своего контейнера.
5. Плавающий элемент не может располагаться выше, чем родительский блок или предыдущий плавающий элемент.
6. Плавающий элемент не может располагаться выше, чем предыдущая строка inline-элементов
7. Плавающий блок должен быть расположен как можно выше.
8. Один плавающий элемент, следующий за другим, не может выходить за пределы своего контейнера — происходит перенос на следующую строку.
9. Блок с float:left должен быть расположен как можно левее, а с float:right — как можно правее.