CSS Floats объяснил в 5 вопросах

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

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

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

Для читателей, которые принимают TL; dr подход к жизни, в конце поста есть краткое изложение.

1. Какие элементы не плавают?

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

2. Что происходит с элементом, когда он плавает?

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

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

Вот еще две вещи, которые происходят с плавающим элементом в зависимости от того, какой тип элемента остается плавающим:

(1) Встроенный элемент превратится в элемент уровня блока когда всплыл.

Когда-нибудь задумывались, почему вдруг вы можете назначить высоту и ширину плавающей пролет? Это потому, что все элементы в плавающем состоянии получат значение блок для его дисплей атрибут (рядный стол получите Таблица) заставляя их блокировать элементы уровня.

(2) Элемент блока с неопределенной шириной будет уменьшен, чтобы соответствовать его содержимому при перемещении.

Обычно, когда вы не указываете ширину для элемента блока, его ширина по умолчанию равна 100%. Но когда это произошло, это уже не так; блок элемента блока будет уменьшаться, пока его содержимое не останется видимым.

3. Что происходит с братьями и сестрами "поплавков"?

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

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

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

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

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

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

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

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

4. Что происходит с родителем «поплавка»?

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

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

5. Как очистить «Поплавки»?

Я уже упоминал, используя переполнение: скрытый сделать так, чтобы родительский объект размещал плавающего дочернего элемента по высоте, создавая правильное пространство для других элементов после "Float" и не позволяя братьям и сестрам оборачивать "Floats".

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

Есть другой метод, где элементы даже не будут рядом с их родными братьями "Float". Используя Чисто атрибут, который вы можете сделать элемент свободным от "Float".

ясно: слева; ясно: правильно; ясно: оба; 

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

Резюме

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