Overflow CSS: основы и применение

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

При использовании CSS для стилизации веб-страниц, иногда возникает ситуация, когда содержимое элемента выходит за его пределы и перекрывает окружающие элементы. Это явление называется "overflow" или "переполнение".

Для решения проблемы переполнения в CSS нас подстаывает свойство "overflow". Данное свойство позволяет контролировать обработку содержимого, которое выходит за пределы блочного элемента.

Свойство "overflow" имеет четыре основных значения: "visible", "hidden", "scroll" и "auto". Рассмотрим каждое из них.

1. Значение "visible":

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

2. Значение "hidden":

При использовании значения "hidden", содержимое элемента, которое выходит за его пределы, будет обрезано и не будет видно. Окна прокрутки не отображаются. Этот подход полезен для создания обтекаемого макета, когда нам нужно скрыть избыточное содержимое.

3. Значение "scroll":

При использовании этого значения создаются окна прокрутки для элемента, уровень прокрутки зависит от того, насколько содержимое выходит за пределы элемента. Даже если содержимое не выходит за пределы, окна прокрутки всегда отображаются, что может влиять на внешний вид страницы. Пример кода:


.overflow-example {
  width: 300px;
  height: 200px;
  overflow: scroll;
}

4. Значение "auto":

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


.overflow-example {
  width: 300px;
  height: 200px;
  overflow: auto;
}

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


.overflow-example {
  width: 300px;
  height: 200px;
  overflow-x: scroll;
}