Как овладеть атрибутом float?

Question

[kozavr]

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

Comments

[dhat]

Попробуй овладеть им грубой силой.

Answer 1

[Олег]

Зафлоаченные элементы выпадают из потока, но лишь частично:

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

Такое поведение флоатов даёт интересные эффекты:

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

Вот неплохой сайт, где можно подтянуть знания.

Comments

[kozavr]

Спасибо.
"Эффект выпадания из родителя или схлопывания родителя. Проявляется тогда, когда все дочерние блоки в родителе зафлоачены. В этом случае родитель схлопывается по высоте, как будто в нём нет содержимого, а блоки выпадают из него."
У меня как раз вот эта хрень происходила, я не сразу понял. Все div внутри section были зафлоачены и section пропадал.
Ну и другие "прелести", не только это.

[dhat]

Ужасный сайт.

Answer 2

[Никита Кит]

Ну кстати о float
dropcogs.pro/css-float-problems.html

Comments

[dhat]

Ваш костыль?

[Никита Кит]

dhat: так точно