В overflowконтроля собственности , что происходит с содержанием , которое ломается за пределами своих границ: представьте , divв котором вы явно установить , чтобы быть 200px в ширину, но содержит изображение, которое 300px в ширину. Это изображение будет торчать из div и будет visibleпо умолчанию. Если вы установите overflowзначение на hidden, изображение обрежется на 200 пикселей.
div ( overflow: visible | hidden | scroll | auto | inherit )Значения
visible: content не обрезается, когда выходит за пределы своего поля. Это значение свойства по умолчанию.hidden: переполненный контент будет скрыт.scroll: аналогично скрытому, за исключением того, что пользователи смогут прокручивать скрытый контентauto: если контент выходит за пределы своего поля, то этот контент будет скрыт, в то время как полоса прокрутки должна быть видна, чтобы пользователи могли прочитать остальную часть контента.initial: использует значение по умолчанию, котороеvisibleinherit: устанавливает значение переполнения родительского элемента.
Помните, что текст будет естественным образом переноситься в конец элемента (если не изменить пробел), поэтому текст редко будет причиной переполнения. Если высота не задана, текст также просто подтолкнет элемент выше. Переполнение чаще возникает, когда заданы явные значения ширины и высоты, и нежелательно, чтобы какой-либо контент выплеснулся наружу, или когда прокрутка явно избегается.
Видимый
Если вы вообще не устанавливаете свойство переполнения, отображается значение по умолчанию. Таким образом, в общем случае нет причин явно устанавливать это свойство как видимое, если вы не отменяете его установку в другом месте.
Здесь важно помнить, что, даже если контент виден за пределами поля, он не влияет на поток страницы. Например:
Как правило, вы все равно не должны устанавливать статическую высоту для блоков с веб-текстом в них, поэтому они не должны появляться.
Скрытый
Видимая противоположность по умолчанию скрыта . Это буквально скрывает любой контент, выходящий за рамки рамки.
Это особенно полезно при использовании динамического содержимого и возможности переполнения, вызывающего серьезные проблемы с разметкой. Однако имейте в виду, что скрытый таким образом контент полностью недоступен (за исключением просмотра источника). Так, например, у пользователя установлен размер шрифта по умолчанию больше, чем вы ожидаете, вы можете выталкивать текст за пределы поля и полностью скрывать его от их представления.
Прокрутка
Установка значения переполнения поля для прокрутки скроет содержимое от рендеринга за пределами поля, но предложит полосы прокрутки для прокрутки внутренней части поля для просмотра содержимого.
Следует отметить, что при использовании этого значения вы получаете ОБЕ горизонтальные и вертикальные полосы прокрутки независимо от того, что, даже если для содержимого требуется только одна или другая.
Для этого значения можно включить прокрутку импульса iOS с помощью -webkit-overflow-scrolling.
Примечание. В OS X Lion, когда полосы прокрутки настроены на отображение только при использовании, scrollведет себя больше похоже на то auto, что отображаются только необходимые полосы прокрутки.
Авто
Автоматическое переполнение очень похоже на значение прокрутки, только решает проблему получения полос прокрутки, когда они вам не нужны. Полосы прокрутки будут отображаться только в том случае, если есть контент, который действительно выходит за пределы элемента.
переполнение-x и переполнение-y
Кроме того , можно манипулировать переполнение содержимого по горизонтали или по вертикали с overflow-xи overflow-yсвойствами. Например, в демонстрации ниже горизонтальное переполнение можно прокручивать, в то время как текст, выходящий за пределы высоты поля, скрыт:
.box ( overflow-y: hidden; overflow-x: scroll; )Очистка поплавка
Как ни странно, одним из наиболее популярных способов использования настройки переполнения является очистка числа с плавающей запятой. Настройка переполнения не очищает поплавок в элементе, он очищается автоматически. Это означает, что элемент с переполнением (любое значение, кроме visible) будет расширяться настолько, насколько это необходимо, чтобы охватить дочерние элементы внутри, которые перемещаются (вместо сворачивания), при условии, что высота не объявлена. Так:
Лучшим методом очистки плавающего элемента является clearfix, поскольку он не требует от вас изменения свойства переполнения способом, который вам не нужен.
Создание контекста форматирования блока
Интересно отметить, что overflowэто также создаст новый контекст форматирования блока, который полезен, если мы хотим выровнять элемент блока рядом с плавающим. В приведенном ниже примере мы показываем, как несколько абзацев будут взаимодействовать с плавающим изображением по умолчанию, а затем мы используем его overflow: hiddenдля выравнивания текста в его собственном поле:
Это взято из отличного поста Николь Салливан, который вдохновил медиа-объект.
Можно ли стилизовать полосы прокрутки с помощью CSS?
Раньше вы могли стилизовать полосы прокрутки в IE (v5.5?), Но не более того. Теперь вы можете снова стилизовать их в браузерах WebKit. Если вам нужны настраиваемые полосы прокрутки в разных браузерах, обратите внимание на JavaScript.
Если к элементу должны быть добавлены полосы прокрутки для соблюдения значения переполнения, Firefox помещает их за пределы элемента, сохраняя видимую ширину / высоту, как заявлено. IE помещает полосы прокрутки внутрь, сохраняя заявленную общую ширину / высоту.
Демо
Демоверсии для этой статьи взяты с этой страницы-образца.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 14,0-14,4 |
Связанный
- Свойство float
Дополнительная информация
- Понимание Humble Clearfix
- Переполнение: секретное преимущество
- Переполнение на MDN
- Переполнение на W3C
- Обнаружение / устранение непреднамеренного перелива тела