CSS Float объяснил пять вопросов

CSS «Floats» (плавающие элементы) просты в использовании, но после их использования эффект, который он оказывает на окружающие его элементы, иногда становится непредсказуемым. Если вам когда-нибудь приходилось сталкиваться с проблемами исчезновения соседних элементов или поплавков, которые торчат как больной большой палец, не беспокойтесь больше.

Этот пост охватывает пять основных вопросов, которые помогут вам стать экспертом в плавающих элементах.

1. Какие элементы не плавают?
2. Что происходит с элементом, когда он плавает?
3. Что происходит с братьями и сестрами из «Поплавков»?
4. Что происходит с родителем “поплавка”?
5. Как вы очищаете «Поплавки»?

Для читателей, которые выбирают подход к жизни, есть краткое изложение в конце поста.
1. Какие элементы не плавают?
Элемент с абсолютным или фиксированным позиционированием не будет плавать. Поэтому в следующий раз, когда вы встретите поплавок, который не работает, проверьте, находится ли он в позиции: абсолютная или позиция: фиксированная и примените изменения соответственно.
2. Что происходит с элементом, когда он плавает?
Когда элемент помечен как «плавающий», он в основном движется влево или вправо, пока не достигнет стены своего элемента контейнера. В качестве альтернативы, он будет работать до тех пор, пока не столкнется с другим плавающим элементом, который уже столкнулся с той же стеной. Они будут накапливаться бок о бок, пока пространство не закончится, и новые входящие будут перемещены вниз.

Плавающие элементы также не будут идти выше элементов перед это в коде, то, что вы должны рассмотреть, прежде чем кодировать «Float» после элемент, на сторону которого вы хотите плавать.
Вот еще две вещи, которые происходят с плавающим элементом в зависимости от того, какой тип элемента остается плавающим:
Встроенный элемент превратится в элемент уровня блока при перемещении
Вы когда-нибудь задумывались, почему вдруг вы можете назначить высоту и ширину плавающему промежутку? Это связано с тем, что все элементы с плавающей точкой получат блок значений для своего атрибута отображения (inline-table получит таблицу), превратив их в элементы уровня блока.
Элемент блока с неопределенной шириной будет уменьшен, чтобы соответствовать его содержимому при перемещении
Обычно, когда вы не указываете ширину для элемента блока, его ширина по умолчанию равна 100%. Но когда это произошло, это уже не так; блок элемента блока будет уменьшаться, пока его содержимое не останется видимым.
3. Что происходит с братьями и сестрами из «Поплавков»?
Когда вы решите поместить элемент в группу элементов, не беспокойтесь о его поведении, его поведение будет предсказуемым и будет либо двигаться влево, либо вправо. То, о чем вы действительно должны думать, это как поведут себя братья и сестры после этого.

У «поплавков» самые заботливые и послушные братья и сестры во всем мире. Они сделают все возможное, чтобы разместить плавающий элемент.

Текстовые и встроенные элементы просто уступят место «Float» и окружат «Float», когда он будет в своем положении.

Элементы блока пойдут на шаг дальше и щедро обернутся вокруг “Float”, даже если это означает выбивание их собственных дочерних элементов, чтобы освободить место для “Float”.

Давайте проверим это в эксперименте. Ниже находится синее поле, а после него – красное поле того же размера с некоторыми дочерними элементами.

Теперь, давайте поместим голубую коробку и посмотрим, что происходит с красной коробкой и ее дочерними элементами.

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

Когда вы добавите overflow: скрытый для элемента, который обернул float, он перестанет это делать. Ниже показано, как красное поле ведет себя с переполнением: скрыто.

1. Что происходит с родителем «поплавка»?
   Родители не очень заботятся о своих «плавающих» детях, за исключением того, что им не следует выходить за пределы своей левой или правой границы.

Обычно элемент блока с неопределенной высотой увеличивает его высоту, чтобы вместить его дочерние элементы, но это не относится к дочерним элементам «Float». Если размер “Float’s” увеличивается, его родитель не будет соответственно увеличивать свою высоту. Это снова может быть решено с помощью переполнения: скрыто в родительском.

1. Как очистить «Поплавки»?
   Я уже упоминал об использовании overflow: hidden, чтобы родительский элемент по высоте размещал плавающий дочерний элемент, создавая правильное пространство для других элементов после «Float» и не позволяя братьям и сестрам переносить «Floats».

И вот как вы заставляете элемент жить рядом с «Поплавком» без компромиссов.

Есть другой метод, где элементы даже не будут рядом с их братьями и сестрами “Float”. Используя атрибут clear, вы можете сделать элемент свободным от того, чтобы находиться рядом с «Float».
ясно: слева; ясно: правильно; ясно: оба;

Значение left очищает все «плавающие» слева от элемента, и наоборот для правого и с обеих сторон для обоих. Этот атрибут clear может быть использован для родного, пустого элемента div или для псевдоэлемента, как вам удобно.
Резюме

1. Абсолютные / Фиксированные элементы не будут плавать.
2. «Поплавок» не идет выше элемента перед это в коде.
3. Если в контейнере недостаточно места, поплавок будет сброшен вниз.
4. Все «Поплавки» сделаны в виде элементов блочного уровня.
5. Если ширина не указана в «Float», она будет уменьшаться в соответствии с содержимым.
6. Более поздние братья и сестры «Float» будут либо окружать их (inline & text), либо оборачивать их (блоки).
7. Чтобы запретить элементу оборачивать «Float», используйте overflow: hidden.
8. Родители “поплавка” не увеличивали бы его высоту, чтобы соответствовать поплавку.
9. Чтобы родительский элемент увеличил свою высоту в соответствии с «Float», используйте overflow: hidden (или создайте пустого брата с clear после него).
10. Чтобы элемент не находился рядом с «Float», используйте атрибут clear.