CSS : Перекрытие! (Overflow)


Содержание статьи:

{{vrezka_css}}

Свойство overflow может использоваться для разных целей - и это поистине наиболее интересное и полезное свойство в CSS.

Что же такое overflow?

Если смотреть в W3Schools.com : "Свойство overflow указывает что делать, если содержимое выходит за границы коробки элемента".

Посмотрим на примеры ниже, чтобы понять как данное свойство работает:

CSS : overflow

Внешне overflow:auto выглядит как iframe, но при этом остается более дружествен к SEO. Данное значение overflow автоматически добавляет полосы прокрутки (вертикальную, горизонтальную или обе сразу) в том случае, если содержимое выходит за границы элемента.

Overflow: scroll делает примерно тоже самое, что и overflow: auto, но при этом полосы прокрутки просто видны всегда, вне зависимости от содерижмого (влазиет оно или нет).

А свойство overflow : hidden скрывает всё, что выходит за границы объекта.

Маленькая заметка: если вам когда-нибудь приходилось сталкиваться с тем, что родительский элемент не полностью охватывает дочерний, то данную проблему можно решить, указав для родительского элемента значение float. Но в некоторых случаях, не приемлемо указание float для родителя (например, когда вы хотите его выровнять по центру или же не знаете его точной ширины). В этом случае вам поможет overflow: hidden. При указании этого параметра, родитель полностью будет "охватывать" детей. Чтобы было более понятно, ниже приведена картинка:

CSS : overflow и охватывание элемента родителем

 


Так же советую почитать: