Что имел в виду автор учебника, устанавливая свойство overflow?

Question

[Максим Белоусов]

Всем привет! Читаю в небезызвестном в Рунете учебнике главу про CSS-свойство float. В разделе «Верстка в несколько колонок» в первом подразделе автор в файле index.html для CSS-класса column-right добавляет свойство overflow: auto и указывает:

/* расшириться вниз захватить float'ы */

Что имелось в виду? Свойство overflow устанавливается для блочных элементов с установленными высотой и шириной, содержимое которых может не поместиться в заданные размеры. Тогда свойство overflow определяет порядок показа содержимого, которое не влезает. В случае с параметром auto добавляется полоса прокрутки, если она необходима.

Конкретно в нашем случае: высота не ограничена, блок может растягиваться по вертикали сколько душе угодно, вмещая свое содержимое. А вот ширина у нас ограничена: 70% от body странички. Т.е. при выставленном свойстве overflow: auto в нашем случае появится горизонтальная полоса прокрутки в случае, если контент выпадет за пределы блока.

Почему же тогда автор указывает такой комментарий?
О каком расширении вниз и захвате float'ов идет речь?

Answer 1

[Ankhena]

Что имелось в виду?

Это и имелось в виду. То, что написано в комментарии.

Родитель ничего не знает о высоте дочерних флоатов.
Если все дети флоаты, то высота родителя будет нулевой.
Чтобы она перестала быть нулевой и стала вести себя как высота по контенту, использовали overflow.

Если вы зададите родителю фон или даже лучше бордер и проведете эксперимент, то всё сами увидите.

Comments

[Ankhena]

Максим Белоусов, я объяснила зачем нужен overflow при использовании float.
А не почему автор сделал опечатку, учитывая, что про них логичнее писать в issues на гитхабе.

[Максим Белоусов]

Т.е. в нашем случае для DIV-элемента с классом column-right установлено свойство overflow, чтобы этот DIV как родитель выделил место для дочернего float'а в лице картинки с Винни-Пухом, правильно? Но указать родителю overflow — это один из способов заставить родителя выделить место под float-ребенка. В этой же главе автор чуть выше указывает, что есть и другие способы, в том числе поставить родителю float. И в нашем случае у родительского DIV с классом column-right как раз-таки установлено свойство float. Тогда возникает вопрос: зачем ещё добавлять overflow?

[Ankhena]

Максим Белоусов,

Т.е. в нашем случае для DIV-элемента с классом column-right установлено свойство overflow, чтобы этот DIV как родитель выделил место для дочернего float'а в лице картинки с Винни-Пухом, правильно?

В том виде примера как он есть сейчас, я не вижу варианта, когда overflow нужен именно для column-right.

На данном этапе имеет смысл узнать как работает флоат и продолжать изучать дальше.
Судя по комментариям, вы вполне с этим разобрались.
В современном мире это очень редкое свойство, используемое только по назначению (обтекание одного элемента другими), а не для построение сеток, как в примере. А уж где можно начать использовать флоат внутри другого флоата в современном мире, даже в голову не приходит. А фантазия у меня богатая.

[Максим Белоусов]

Ankhena, сенкс!