overflow: hidden, scroll, auto, clip
Управляйте обработкой выходящего за границы содержимого с помощью значений hidden, scroll, auto и clip.
«overflow: hidden, scroll, auto, clip» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Итоги по свойству overflow
overflow управляет поведением содержимого элемента, когда оно выходит за заданные размеры. Свойство одновременно применяется к обеим осям (для управления каждой осью отдельно используйте overflow-x/overflow-y).
overflow: visible
visible (по умолчанию) — содержимое отображается за пределами блока. При этом контекст форматирования блока (BFC) не создаётся. Другие элементы могут перекрывать вышедшее за границы содержимое.
overflow: hidden
hidden обрезает содержимое по границе блока. Это создаёт BFC, который содержит плавающие элементы и предотвращает схлопывание внешних отступов. Это наиболее распространённое значение для контейнеров изображений с закруглёнными углами.
<div class="rounded-card"></div>overflow: scroll
scroll всегда отображает полосы прокрутки (на поддерживающих их осях), независимо от того, выходит ли содержимое за границы. Это полезно для единообразного интерфейса, в котором полосы прокрутки должны всегда занимать место, чтобы предотвратить смещение макета.
<div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>overflow: auto
auto отображает полосы прокрутки только при фактическом выходе содержимого за границы. Для большинства прокручиваемых контейнеров это предпочтительнее scroll, поскольку предотвращает ненужное отображение полос прокрутки.
<div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>overflow: clip
clip обрезает содержимое подобно hidden, но НЕ создаёт BFC. Поэтому это значение не влияет на ограничение плавающих элементов или схлопывание внешних отступов. Используйте его, когда нужно обрезать содержимое без побочных эффектов BFC.
<div class="decorative-overflow"><div class="deco"></div></div>overflow-x и overflow-y
Управляйте каждой осью независимо. Очень распространённый вариант — горизонтальная прокрутка для широкого содержимого (таблиц, кода) при видимом содержимом, выходящем за границы по вертикали:
<div class="table-wrapper">
<table>
<tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>overflow и BFC
Установка любого значения overflow, кроме visible и clip, создаёт контекст форматирования блока. Он ограничивает плавающие элементы внутри блока, не даёт схлопыванию внешних отступов распространяться наружу и создаёт новый контекст прокрутки.
overflow: overlay (нестандартное значение)
overflow: overlay отображает полосу прокрутки поверх содержимого, не занимая место в макете. В некоторых браузерах это было нестандартное значение; теперь его заменяют современные средства стилизации полос прокрутки.
scrollbar-gutter
Новое свойство scrollbar-gutter: stable резервирует место для полосы прокрутки, даже когда она не нужна, и предотвращает смещение макета при появлении возможности прокрутки содержимого.
<div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>overflow и фиксированные дочерние элементы
Распространённая ошибка: дочерний элемент с position: fixed внутри элемента с overflow: hidden ведёт себя как элемент с position: absolute — фиксированная позиция определяется относительно содержащего блока, а overflow создаёт новый контекст наложения.
Быстрая проверка
Какое значение overflow обрезает содержимое, не создавая контекст форматирования блока?
Итоги
visible (по умолчанию) разрешает выход содержимого за границы. hidden обрезает содержимое и создаёт BFC. scroll всегда отображает полосы прокрутки. auto отображает полосы прокрутки только при необходимости (предпочтительный вариант). clip обрезает содержимое без создания BFC. Используйте overflow-x/y для управления отдельными осями. Используйте scrollbar-gutter: stable, чтобы предотвратить смещение макета.
Часто задаваемые вопросы
Урок «overflow: hidden, scroll, auto, clip» бесплатный?
Да — полный текст урока «overflow: hidden, scroll, auto, clip» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «overflow: hidden, scroll, auto, clip»?
Управляйте обработкой выходящего за границы содержимого с помощью значений hidden, scroll, auto и clip. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «overflow: hidden, scroll, auto, clip»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- overflow: hidden, scroll, auto, clip
- scroll-behavior: smooth
- scroll-snap-type и scroll-snap-align
- Стилизация полосы прокрутки с помощью ::-webkit-scrollbar