overflow:hidden

26 Apr, 2010

Незаслуженно непопулярный трюк. Я уже писал про display:table. Так вот, это &#8212 лучше. P.S.: оказалось трюк таки известен многим, надеюсь кому-то статья поможет.

Проблема

Еще пять лет назад я искал решение проблемы: как запретить обтекание float. Подробнее можно читать в старом посте (2005 год, офигеть). Вкратце, мы приводили это:

Картинка-float

к такому виду:

Картинка-float + display:table для текста

Для этого тексту задавалось свойство display:table. А для IE zoom:1.

overflow:hidden magic

Относительно недавно (относительно пяти лет) мы столкнулись с новым способом, оказалось что overflow:hidden может повторить этот эффект, и сделать его даже лучше. Причина обоих трюков, вовсе не глюки браузеров или специфика их отображения. Причина на сайте W3C:
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself. W3C, CSS 2.1
источник То есть это не хак, а документированное поведение. Всё дело в так называемом «контексте» или «контексте форматирования», такие правила как display и overflow создают этот контекст, и согласно правилам он (созданный контекст) не может пересекаться с флоатами. Что вобщем и происходит. В результате блок занимает все доступное пространство кроме флоата.
Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.
Как видим контекст можно создавать разными способами.

Важное отличие от display:table — ширина блока, я сделал специальный пример чтобы было видно, чем часто был неудобен именно display:table.

Именно это отличие позволяет делать с overflow более сложные вещи чем с display:table.

Когда мало текста, блок не занимает всю ширину

IE?

IE6 — не работает ни display:table ни overflow:hidden. Нужно использовать zoom:1; (или любой hasLayout). В результате эффект идентичен действию overflow в других браузерах.

IE7-8 — overflow:hidden работает также как во всех остальных возможных браузерах.

Резюмируя: можно добавить к overflow:hidden еще zoom:1; и забыть о проблеме.

Возможные применения

Самое простое и банальное, вёрстка блоков с текстом и картинкой:

Редкий сайт обходится без такого блока

Используя overflow:hidden можно их стилизовать для произвольной ширины картинок.

Чуть более сложный кейс, резиновый инпут и кнопка:

Обычное дело на резиновых сайтах

С подобной проблемой недавно столкнулся Глеб Арестов и успешно решил её как раз с помощью этого же свойства.

Более того, можно строить layout страниц. В частности в фреймворке OOCSS колонки строятся как раз с использованием этого свойства. Примерно так:

Можно не задавать ширину резиновой колонке

Конечно, тут минимум два недостатка. Во-первых, порядок контента — средняя колонка должна идти в коде после обоих боковых. Во-вторых, нестабильность при сжатии, когда что-то начинает не помещаться в блоке с overflow:hidden, его самым невероятным образом разрывает на части в IE. min-width мог бы спасти. Использовать осторожно.

Но, помнить о таком мощном приеме стоит.

Еще

Это не CSS3 и далеко не вчерашнее изобретение, но кажется многие недооценивают силу этого простого приема.

Буду рад если поделитесь своим опытом!

45 комментариев к “overflow:hidden”

1.Юрко | 26 Apr, 2010
Свєжак!
2.miripiruni | 26 Apr, 2010
Почему же? Очень даже популярный прием, среди меня, например ;) Кстати у Flack'а есть старенький пост пhо это же поведение.
3.akella | 26 Apr, 2010
Значит он просто проходил мимо меня, я ж и не говорю что новый, но пара знакомых точно не знала :) А тут я наконец нашел причину, и она весьма законная и решил привлечь внимание ;)
4.macgera | 26 Apr, 2010
Блог Tips&Tricks по CSS))) или вообще How to ))))
5.Антон Вернигор | 26 Apr, 2010
Немного спокойнее использовать для этого overflow: auto, при этом достигается тот же эффект.
6.akella | 26 Apr, 2010
Да, но к сожалению на практике он иногда вызывает появление скроллинга =(
7.Genn | 26 Apr, 2010
CSS4 as is!
8.ask | 26 Apr, 2010
После мастер-класса только так и делаю для блоков фикс+резина ;) Действительно, очень просто, удобно и работает везде, где требуется.
9.Николай | 26 Apr, 2010
А еще если кто-то вдруг вздумает оформлять таким способом иконки или другие мелкие картинки, помните о том что в FF текст обрезается на 1px по краям и нужно делать padding:1px; для блока с overflow:hidden; Кстати, при редизайне сайта W3C активно использовался этот метод.
10.Глеб Арестов | 26 Apr, 2010
Кому интересна данная тема предлагаю ознакомится ещё вот с этими статейками :) Clear или overflow:hidden — очистка всего потока или создание контекста форматирования? http://habrahabr.ru/blogs/css/48383/ Управление потоком в CSS: создаём контекст форматирования http://habrahabr.ru/blogs/css/48429/
11.GreLI | 26 Apr, 2010
Ну вообще-то всё это можно было узнать, прочитав первый абзац из Block formatting contexts: «Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.» (выделение моё) и далее. С overflow:hidden есть такая проблема, что обрезается всё что вылезает за пределы. Например, можно сделать резиновый инпут с кнопкой, но подсказку (например, список вариантов строк поиска) к нему уже не отобразишь: обрежется. Только если извращаться так, чтобы позиционирование было относительно блока вне этого overflow, хоть позиционировать хочется и относительно содержимого.
12.akella | 26 Apr, 2010
@GreLI Благодарю! Но я ж именно для этого я и вставил эту же цитату в пост. А правда в том что 99% не читают спецификацию. Я, например. ;) А когда не подходит overflow всегда можно вернуться к старому доброму display:table и поизвращаться по-другому.
13.Genn | 26 Apr, 2010
akella и GreLl, самое крутое, что спецификацию не читают создатели браузеров! ;)
14.mktums | 26 Apr, 2010
Вот! Вот чего не хватает! Приемы, хаки, how-to! Спасибо за статью :)
15.GreLI | 26 Apr, 2010
Genn, читать-то читают, но там свои заморочки. Текст в спецификации мог сильно меняться со временем. Лет 10 назад эти моменты были гораздо менее ясны.
16.private_face | 26 Apr, 2010
В своем примере (http://cssing.org.ua/examples/overflow-hidden/index_layout.html) вы забыли установить hasLayout для колонки .center. Если контента в центральной части будет больше, чем в колонках, этот контент начнет колонки обтекать. Если же hasLayout установить, то в IE6 между float колонками и центральной частью появляется 3px отступ. Можно, конечно, пофиксить отрицательными маргинами, но как-то некрасиво. Может есть способ попроще?
17.Олег | 26 Apr, 2010
Мы всё-таки используем clearfix, потому что в современных сайтах очень много всяких выпадушек и прочих прыгающих элементов и проще навесить какой-нибудь глобальный класс (типа .clearfix), который исправляет эту проблему, нежели мучаться с overflow.
18.Maksim | 27 Apr, 2010
Ну раз уж речь пошла об "overflow: hidden", то я тогда не удержусь про "быстрый clearfix" без всяких :after. Если родителю задать свойство "overflow: hidden", то он так же не дает выпрыгивать из себя внутренние блоки с обтеканием как. Тем же самым свойством обладают, табличные и inline-block элементы. Конечно не америку открыл, но мало ли кому-то будет полезным.
19.Никита Селецкий | 27 Apr, 2010
Олег и Maksim, по-моему тут речь идёт не о clearfix. Если бы это был контейнер с плавающим блоком внутри, то да. А здесь плавающий блок, а за ним идёт блок в общем потоке, который игнорирует плавающий, а внутренние строковые элементы обтекают «поплавок». akella, а чем это лучше margin: «ширина зафлоаченного блока»? Разве что на строчку меньше писать, но зато больше контроля, мне кажется.
20.Никита Селецкий | 27 Apr, 2010
имеется в виду margin-left или margin-right в зависимости от того, где блоки находятся.
21.Олег | 27 Apr, 2010
Никита, вы правы, Юра прошу прощения. Соответственно я отвечу на ваш вопрос про margin: в данном случае мы получаем возможность не зависеть от ширины обтекаюемого блока. Юра, всё-таки несмотря на это мне кажется overflow:hidden хуже display: table именно по причине опять же невозможности выносить из него абсолютно позиционированные элементы. Хотя надо поэкспериментировать, вроде как в норм.браузерах все должно быть ок, а для ие zoom: 1 + position: relative.
22.GreLI | 27 Apr, 2010
Никита Селецкий, это лучше тем, что ширина флоата может быть совершенно неизвестной и менятся в зависимости условий. Например, в случае с инпутом и кнопкой, на кнопке текст может оказать написанный неизвестным шрифтом и размером, а сам он может различен в зависимости от языка.
23.Никита Селецкий | 27 Apr, 2010
Спасибо за разъяснение.
24.Никита Селецкий | 29 Apr, 2010
private_face, 3 пиксельный отступ лучше фиксировать отрицательным маргином именно у плавающей картинки.
25.akella | 28 Apr, 2010
Спасибо Глеб! Добавил обе ссылки в пост! (Там только картинки покорежились жаль=() @private_face Да, действительно, увлекся отказом от IE6 ;)
26.float – запрет обтекания с помощью overflow:hidden « Artycreate 4developers blog | 30 Apr, 2010
[...] Сама статья: http://cssing.org.ua/2010/04/26/overflow-hidden/ [...]
27.Jman | 17 May, 2010
я с самого начала использовал повсеместно overflow:hidden; zoom:1; так как считал table-cell а тем более :after{clear:both} лишними финтами.
28.Eduard | 07 May, 2010
Так намного лучше! Мне понравилось, буду пользоваться!
29.Del'ka | 05 May, 2010
Клёво! Реально клёво! Спеку читать тяжко, я смог осилить лишь спеку по html4 и то заставлял себя читать каждый день хоть по несколько экранов с мобилки по дороге домой. А у Мейера в книге про такой интересный финт не рассказывалось.
30.warmrobot | 28 May, 2010
И да придёт спаситель! )) Только что столкнулся с тем, что контент переносился со строчки на строчку, так как его сжимал объемлющий display: table. Спасибо!
31.Парад статей для css и html разработчиков | Masterix.com.ua | Блог для тех кто верстает. | 01 Jun, 2010
[...] Overflow:hidden от отлиного сайта cssing.org.ua. Отличное решение проблемы обтекания картинки текстом. Можно так же вспомнить как это делалось раньше и что предлагает сделать автор сейчас. [...]
32.evgeni | 21 Jun, 2010
Интересное решение. Вы откуда их берете, из своего опыта или из документации?
33.Lemberg | 12 Jul, 2010
Достойный прочтения материал, раньше даже не задумывался о возможных способах решения, как правило, лепил наспех таб с двумя колонками. Будем использовать, пасиб)
34.Levik | 19 Aug, 2010
Есть ещё один, ещё более "старенький" пост в котором упоминается о поведении overflow:hidden... http://cssing.org.ua/2005/11/24/css-simple-two-columns/
35.maxim | 22 Sep, 2010
попробую сегодня у себя
36.Индивидуалки | 14 Sep, 2010
интересная статья
37.igor | 15 Sep, 2010
отличная статья.
38.evgenii | 16 Sep, 2010
О, отличный способ, спасибо)
39.vanchelo | 23 Sep, 2010
А margin-left - почему нельзя использовать
40.akella | 23 Sep, 2010
Потому что для margin-left нужно знать ширину картинки, а с overflow:hidden делается универсально.
41.vanchelo | 23 Sep, 2010
В этом плане, я согласен
42.css свойство float – запрет обтекания с помощью overflow:hidden | DVA home page | 24 Sep, 2010
[...] статья: http://cssing.org.ua/2010/04/26/overflow-hidden/ This entry was posted in Posts and tagged css. Bookmark the permalink. Инструкция [...]
43.kvex | 04 Nov, 2010
Использую для очитски действия float: overflow: hidden; - для нормальных браузеров width: 100%; (или в пикселях) - для IE
44.Очередной вебмастер | 10 Sep, 2011
Вы мой спаситель, сам начинающий верстальщик, и это вопрос мне не дает покоя уже полгода, чтоб картинка была слева, а текст справа обтекал, но при этом не был под ней ))) Все гениальное просто. Еще раз спасибо.
45.Вебмастер | 28 Oct, 2011
Да, но согласитесь, верстать нынче стало проще!