CSS свойство overflow

Свойство переполнения CSS overflow контролирует, что происходит с содержимым, выходящим за границы элемента. Например вы создали div, для которого явно установили ширину 200px, но внутри него поместили изображение шириной 300px. Это изображение будет выступать за пределы div и по умолчанию будет видимым. Если вы установите значение overflow как скрытое – hidden, изображение обрежется до 200 px.

overflow: [ visible | hidden | clip | scroll | auto | inherit ]{1,2}

Значения

visible

Содержимое не обрезается, когда выходит за пределы своего контейнера. Это значение по умолчанию.

hidden

Выходящий за границы контейнера контент будет скрыт.

scroll

Аналогично hidden, за исключением того, что добавляется полоса прокрутки, чтобы пользователи могли прокручивать скрытый контент.

auto

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

initial

использует значение по умолчанию – visible.

inherit

перенимает значение переполнения от родительского элемента.

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

Visible

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

На примере ниже выводится div, в котором находится текст. У этого div указана высота height:100px; и сделана синяя рамка, чтобы были видны границы. И хорошо видно, что хотя сам блок заканчивается нижней рамкой, текст идет ниже и выходит за его пределы. Все потому, что по умолчанию видимость при переполнении установлена в visible – видима.

See the Pen
overflow visible by Андрей (@adlibi)
on CodePen.

Еще интересный момент в том, что даже если контент виден за пределами блока, это вылезающее содержимое не влияет на поток страницы. Например, под блоком с синей рамкой выведен блок с красной рамкой и прозрачным красным фоном. Видно, что текст за пределами первого контейнера не мешает второму контейнеру и тот примыкает вплотную к первому.

See the Pen
overflow flow by Андрей (@adlibi)
on CodePen.

Говоря в целом: не стоит без особой причины устанавливать фиксированную высоту элементов.

Hidden

Это значение противоположность visible. Оно скрывает любой контент, выходящий за рамки контейнера. Повторим первый пример, но с примененным к контейнеру свойством:

overflow: hidden;

See the Pen
overflow hidden by Андрей (@adlibi)
on CodePen.

Текст, который выходит за пределы div, перестал быть видимым.

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

Scroll

Установка значения переполнения в scroll скроет содержимое за пределами поля, но создаст полосы прокрутки для просмотра скрытого содержимого.

See the Pen
overflow scroll by Андрей (@adlibi)
on CodePen.

Следует отметить, что с этим значением вы получаете И горизонтальную И вертикальную полосы прокрутки независимо от того, что для содержимого требуется только одна или другая.

Для iOS это значение будет работать с помощью -webkit-overflow-scrolling.

Auto

Значение auto похоже scroll, но оно решает вопрос получения полос прокрутки, только когда они вам нужны. Полосы прокрутки будут отображаться только в случае, если есть контент, который действительно выходит за пределы контейнера.

На примере ниже видно, с этим значением осталась только вертикальная полоса прокрутки.

See the Pen
overflow auto by Андрей (@adlibi)
on CodePen.

overflow-x and overflow-y

Также можно управлять переполнением содержимого по горизонтали или вертикали с помощью свойств overflow-x и overflow-y. Например, в демонстрации ниже горизонтальное переполнение можно прокручивать, в то время как текст, выходящий за пределы высоты поля, скрыт:

See the Pen
overflow x y by Андрей (@adlibi)
on CodePen.

При этом основное свойство можно использовать как составное и указывать значения сразу для оси X и Y таким образом:

overflow: auto hidden;

Очистка Float

Как ни странно, одним из наиболее популярных способов использования overflow является очистка свойства float.

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

На примере это наглядно видно. Внутри родительского элемента (в синей рамке) помещен элемент с текстом и установленным свойством float. Родительский элемент при этом свернулся.

See the Pen
overflow float by Андрей (@adlibi)
on CodePen.

Элемент с установленным свойством переполнением (любое значение, кроме visible) будет расширяться настолько, насколько необходимо, чтобы охватить все дочерние элементы внутри его, которые являются плавающими. Ниже тот же пример, но с установленным для родителя свойством overflow: auto:

See the Pen
overflow float 2 by Андрей (@adlibi)
on CodePen.

Overlay

Есть еще одно значение свойства overflow: overlay, но оно не стандартизировано. Работает, как auto, но в отличие от него не изменяет размеры блока, то есть скроллинг при необходимости накладывается “поверх” элемента.