# Свойство "overflow"

Свойство `overflow` управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.
[cut]
Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое "переполняет" блок. Его отображение в этом случае задаётся свойством `overflow`.

Возможные значения
<ul>
<li>`visible` (по умолчанию)</li>
<li>`hidden`</li>
<li>`scroll`</li>
<li>`auto`</li>
</ul>

## visible

Если не ставить `overflow` явно или поставить `visible`, то содержимое отображается за границами блока.

Например:

```html
<!--+ autorun -->
<style>
  .overflow {
*!*
    /* overflow не задан */
*/!*
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>

<div class="overflow">
  visible ЭтотТекстВылезаетСправаЭтотТекстВылезаетСправа
  Этот текст вылезает снизу Этот текст вылезает снизу
  Этот текст вылезает снизу Этот текст вылезает снизу
</div>
```

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

## hidden

Переполняющее содержимое не отображается.

```html
<!--+ autorun -->
<style>
  .overflow {
*!*
    overflow: hidden;
*/!*
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>

<div class="overflow">
  hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
</div>
```

Вылезающее за границу содержимое становится недоступно.

Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.

## auto

При переполнении отображается полоса прокрутки.

```html
<!--+ autorun -->
<style>
  .overflow {
*!*
    overflow: auto;
*/!*
    width: 200px;
    height: 100px;
    border: 1px solid black;
  }
</style>

<div class="overflow">
  auto ЭтотТекстДастПрокруткуСправаЭтотТекстДастПрокруткуСправа
  Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу
  Этот текст даст прокрутку снизу
</div>
```

## scroll

Полоса прокрутки отображается всегда.

```html
<!--+ autorun -->
<style>
  .overflow {
*!*
    overflow: scroll;
*/!*
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>

<div class="overflow">
  scroll
  Переполнения нет.
</div>
```

То же самое, что `auto`, но полоса прокрутки видна всегда, даже если переполнения нет.

## overflow-x, overflow-y

Можно указать поведение блока при переполнении по ширине в `overflow-x` и высоте -- в `overflow-y`:

```html
<!--+ autorun -->
<style>
  .overflow {
*!*
    overflow-x: auto;
    overflow-y: hidden;
*/!*
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>

<div class="overflow">
  ПоШиринеПолосаПрокруткиAutoПоШиринеПолосаПрокруткиAuto
  Этот текст вылезает снизу Этот текст вылезает снизу
  Этот текст вылезает снизу Этот текст вылезает снизу
</div>
```

## Итого

Свойства `overflow-x/overflow-y` (или оба одновременно: `overflow`) задают поведение контейнера при переполнении:

<dl>
<dt>`visible`</dt>
<dd>По умолчанию, содержимое вылезает за границы блока.</dd>
<dt>`hidden`</dt>
<dd>Переполняющее содержимое невидимо.</dd>
<dt>`auto`</dt>
<dd>Полоса прокрутки при переполнении.</dd>
<dt>`scroll`</dt>
<dd>Полоса прокрутки всегда.</dd>
</dl>

Кроме того, значение `overflow: auto | hidden` изменяет поведение контейнера, содержащего `float'ы`. Так как элемент с `float` находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой `overflow`, то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье [](/float).