Что такое overflow?

Приветствую вас в очередном обучающем уроке по технологии CSS. Вот что-то вздумалось мне написать еще про кое какой элемент, незнание которого, может привести к массе проблем с версткой сайта на блоках.

Я и сам честно говоря не так давно узнал про этот очень нужный технический приём (Это было в начале 2011 года).

Ну что-же, давайте по порядку, где и для чего именно мы будем использовать этот параметр overflow? Приведу вам наглядный пример, в то время, когда я верстал этот сайт на divах, у меня было два основных блока из которых он состоял, это блок <div id="meny"> из которого состоит левая часть сайта с навигацией и основной блок <div id="content"> который отвечает за отображение контента и всего остального. 

В общем я левому блоку с навигацией, присвоил оптекание с права: float:left, после этого блок контента выровнялся с права в месте с навигационной частью, но не тут то было, геморой с флоатами только начинался, вот собственно скриншет с данной проблемой:

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

Пописываем в таблице стилей следующие правила:

#conteiner {overflow:hidden;} Данным действием мы запрещаем использовать скроллинг.

#meny {float:left; padding-bottom:32000px; margin-bottom:-32000px;} Этим самым мы удлинняем блок вниз на 32000 пикселей, а затем сокращаем отрицательным марджином.

#content {padding-bottom:32000px; margin-bottom:-32000px;} Здесь для подстраховки прописано тоже самое.

После всех вышеперечисленных действии получилось следующее:

Теперь то понятно как именно нам помогло этот overflow:hidden, мы просто удлинили оба блока аж на тридцать две тысячи пикселов вниз, без параметра owerflow, эти блоки бы растянулись бы вниз на 32000 писелов, но этого не произошло, потому что overflow:hidden запрещает прокрутку.

Наверно всё-таки рановато я вам про оверфлоу начал заливать, мы же еще флоаты не прошли, ну да ладно, следующий урок по CSS будет посвящен флоатам.