overflow:hidden

kvant · March 16, 2011

Есть некоторый код (для примера)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<style>
div {
}
ul {
	list-style-type:none;
    margin: 0;
	padding: 0;
}
li {
	float: left;
	margin: 3px;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>
bla-bla-bla
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>

Посмотреть как работает можно здесь

В этом примере все криво и не так как нужно.

Проблему исправляет overflow: hidden для элемента ul. См. Посмотреть как работает можно здесь

Хотелось бы понять как все это работает. Почему без overflow все криво, а с ним нормально?

Насколько вообще корректен этот код, может можно сделать проще?

Justnewone · March 16, 2011

Все невероятно просто.

Со второй попытки всего придет знание.

PanSoul · March 16, 2011

Есть некоторый код (для примера)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
</head>
<style>
div {
}
ul {
	list-style-type:none;
    margin: 0;
	padding: 0;
}
li {
	float: left;
	margin: 3px;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>
bla-bla-bla
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
Посмотреть как работает можно здесь
В этом примере все криво и не так как нужно.
Проблему исправляет overflow: hidden для элемента ul. См. Посмотреть как работает можно здесь
Хотелось бы понять как все это работает. Почему без overflow все криво, а с ним нормально?
Насколько вообще корректен этот код, может можно сделать проще?

Просто нужно было после 1-ого ul очистить обтекание слева, к примеру, написать <br clear="all">

А это для самообразования

kvant · March 16, 2011

Извините, но я не просил говорить что мне нужно сделать и не просил давай ссылки на страницы, которые много раз уже читаны.

Я просил доходчиво объяснить как это все работает. Задача не в том, чтобы сделать корректно отображаемую страницу, а в том, чтобы понять логику работы.

Например, по ссылке выше написано:

hidden Отображается только область внутри элемента, остальное будет скрыто.

Что он в данном случае скрывает и что отображает?

Justnewone · March 16, 2011

Надо еще настойчивей потребовать, поможет.

Int · March 16, 2011

Скрывает всё остальное, что не влезло внутрь, ну понятно же.

kvant · March 16, 2011

Скрывает всё остальное, что не влезло внутрь, ну понятно же.

В общем случае, да. Как я понимаю, если содержимое блока выходит за его размеры, то overflow: hidden скрывает то, что за пределами блока.

А что он скрыл в данном конкретном случае скрывает? Вроде все что было осталось, только выравнивание почему-то изменилось. Почему?

sigma77 · March 16, 2011

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

Самая подробная информация: здесь.

В частности

9.4.1 Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
For information about page breaks in paged media, please consult the section on allowed page breaks.

Что он в данном случае скрывает и что отображает?

Отображает всё что находится внутри блока и скрывает всё, что в него не влазит.

SelenIT · March 16, 2011

В данном случае ничего не скрывает. А используется исключительно ради побочного эффекта, описанного в цитате выше — создания нового контекста форматирования.

kvant · March 16, 2011

В данном случае ничего не скрывает. А используется исключительно ради побочного эффекта, описанного в цитате выше — создания нового контекста форматирования.

Спасибо. Как я и подозревал это побочный эффект, поэтому изначально спросил насколько это корректно.

Теперь вопрос, как сделать правильно. Использовать лишний тэг <br clear="all"> только ради исправления форматирования мне кажется неправильным.

PanSoul · March 16, 2011

Спасибо. Как я и подозревал это побочный эффект, поэтому изначально спросил насколько это корректно.
Теперь вопрос, как сделать правильно. Использовать лишний тэг <br clear="all"> только ради исправления форматирования мне кажется неправильным.

можно указать ul{display:inline-block;}

kvant · March 16, 2011

можно указать ul{display:inline-block;}

Согласен, можно. Можно еще указать li{display:inline}, а float убрать. В данном частном случае и тот и другой способ подойдет.

Усложним задачу.


<div class="block">
<? include "header.php"; ?>
</div>
<div class="block">
</div>
<div class="block">
</div>

Это упрощенный шаблон. Исходя из выше сказанного, если в header.php будет код с использованием выравнивания (например, float:left), то нет гарантии, что все три блока будут друг под другом. Как этого избежать? Указать в классе block overflow:hidden;? Вариант, но что-то он мне не нравится. Указать display: inline-block? С точки зрения семантики не такой уж это inline-block. Что-то еще?

Justnewone · March 16, 2011

Согласен, можно. Можно еще указать li{display:inline}, а float убрать. В данном частном случае и тот и другой способ подойдет.
Усложним задачу.
<div class="block">
<? include "header.php"; ?>
</div>
<div class="block">
</div>
<div class="block">
</div>
Это упрощенный шаблон. Исходя из выше сказанного, если в header.php будет код с использованием выравнивания (например, float:left), то нет гарантии, что все три блока будут друг под другом. Как этого избежать? Указать в классе block overflow:hidden;? Вариант, но что-то он мне не нравится. Указать display: inline-block? С точки зрения семантики не такой уж это inline-block. Что-то еще?

В данном упрощенном виде исправит, например, назначение clear для block

И да, в CSS нет и не может быть никакой семантики.

SelenIT · March 16, 2011

насколько это корректно

Абсолютно корректно. Как минимум, не менее корректно, чем верстка колонок float-ами

Для создания контекста можно еще display:table или table-cell. У каждого способа свои плюсы и минусы (у overflow — невозможность сделать позицинионированные потомки визуально выступающими за блок, у display:table — ширина по умолчанию обжимается по содержимому). В большинстве случаев overflow — самый безболезненный вариант.

У вариантов без создания контекста (clear:both для псевдоэлемента :after и т.п.) минус в том, что для старых IE всё равно приходится использовать костыль с контекстом (hasLayout), отчего по-разному ведут себя margin-ы и т.п. А пустой невидимый div с clear — универсально, но некрасиво и несемантично...

psywalker · March 16, 2011

У вариантов без создания контекста (clear:both для псевдоэлемента :after и т.п.) минус в том, что для старых IE всё равно приходится использовать костыль с контекстом (hasLayout), отчего по-разному ведут себя margin-ы и т.п.

Дружище, а как именно себя неправильно ведут margin-ы и т.п.? Если можно, примерчик.

Justnewone · March 16, 2011

Имелось ввиду, что при включении hasLayout IE перстает внутренние маргины вываливать из блока, точно как оверфлоу.

SelenIT · March 16, 2011

Да, я имел в виду именно это . Есть хорошая статья по теме у Тьерри Кобленца (автора вот такого безобразия). Еще показательный пример есть в комментах к соотв. статье на Хабре.

psywalker · March 16, 2011

Да, я согласен. Нужно конечно же выбирать способ в зависимости от задачи. Но по мне всё таки .clearfix интереснее, хотя бы тем, что с ним не происходит всех тех минусов, которые связаны с overflow: hidden;, особенно с обрезанием границ.

SelenIT · March 16, 2011

С display:table/table-cell/inline-block обрезания границ тоже не происходит. И с банальным float для контейнера (я очень долго других способов просто не знал). Правда, остается вопрос с шириной, но он решается (в частном случае, когда контента много — сам собой).

Чисто идеологически, наверное, да, clearfix — меньшее зло (при том, что сама раскладка блоков float-ами — вынужденная мера). Но IE7(-)...

psywalker · March 17, 2011

С display:table/table-cell/inline-block обрезания границ тоже не происходит. И с банальным float для контейнера (я очень долго других способов просто не знал). Правда, остается вопрос с шириной, но он решается (в частном случае, когда контента много — сам собой).
Чисто идеологически, наверное, да, clearfix — меньшее зло (при том, что сама раскладка блоков float-ами — вынужденная мера). Но IE7(-)...

Я кстати последнее время посматриваю на inline-block, как то всё нахожу у него разные плюсы, а ты что можешь насчёт него сказать? Какие минусы в себе несёт?

sigma77 · March 17, 2011

Я кстати последнее время посматриваю на inline-block, как то всё нахожу у него разные плюсы, а ты что можешь насчёт него сказать? Какие минусы в себе несёт?

Навскидку, хотя бы тем, что он хоть и блок, но inline и ширина у него зависит от содержимого. Т.е. также как и любой другой метод не всегда подойдет. clearfix'ом тоже нужно уметь пользоваться, бездумно его тоже нельзя использовать

psywalker · March 17, 2011

Навскидку, хотя бы тем, что он хоть и блок, но inline и ширина у него зависит от содержимого.

Но секундочку, а разве это и не есть плюс? Т.е. мы же тут даже можем выбирать, ставить ли нам конкретную ширину или нет.

sigma77 · March 17, 2011

Но секундочку, а разве это и не есть плюс? Т.е. мы же тут даже можем выбирать, ставить ли нам конкретную ширину или нет.

Ну, а если тебе, например, нужно сделать резиновым + марджины, паддинги и бордеры. Обертки будешь городить? Можно, конечно, но уже не так красиво.

Или, например, у тебя идет серия блоков картинка + обтекающий её текст. Блоки должны быть друг под другом. Но при небольшом контенте блоки могут встать на одну строку.

Так что всё может быть как плюсом так и минусом

psywalker · March 17, 2011

Ну, а если тебе, например, нужно сделать резиновым + марджины, паддинги и бордеры. Обертки будешь городить? Можно, конечно, но уже не так красиво.

Если при этом код будет гибким и правильным, то я никак не могу назвать это некрасивостью) И, да, с удовольствием сделаю обёртку в таком случае. Не задумываясь.

И ещё вопрос: А в обычной жизни ты бы как сделала? При обычных блоках.

Или, например, у тебя идет серия блоков картинка + обтекающий её текст. Блоки должны быть друг под другом. Но при небольшом контенте блоки могут встать на одну строку.

Где проблема?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline-block</title>
<style type="text/css">
	* { margin: 0; padding: 0;}

	.inline-block { display: inline-block; width: 300px; background: red;}
	.img { float: left; background: blue;}
	p { background: yellow;}
</style>
</head>

<body>
	<div class="inline-block">
		<div class="img">IMG-Float</div>
		<p>Ну, а если тебе, например, нужно сделать резиновым + марджины, паддинги и бордеры. Обертки будешь городить?  Можно, конечно, но уже не так красиво.
Или, например, у тебя идет серия блоков картинка + обтекающий её текст. Блоки должны быть друг под другом. Но при небольшом контенте блоки могут встать на одну строку.</p>
	</div>
	<div class="inline-block">
		<div class="img">IMG-Float</div>
		<p>Ну, а если тебе, например, нужно сделать резиновым + марджины, паддинги и бордеры. Обертки будешь городить?  Можно, конечно, но уже не так красиво.
Или, например, у тебя идет серия блоков картинка + обтекающий её текст. Блоки должны быть друг под другом. Но при небольшом контенте блоки могут встать на одну строку.</p>
	</div>
	<div class="inline-block">
		<div class="img">IMG-Float</div>
		<p>Ну, а если тебе, например, нужно сделать резиновым + марджины, паддинги и бордеры. Обертки будешь городить?  Можно, конечно, но уже не так красиво.
Или, например, у тебя идет серия блоков картинка + обтекающий её текст. Блоки должны быть друг под другом. Но при небольшом контенте блоки могут встать на одну строку.</p>
	</div>
	<div class="inline-block">
		<div class="img">IMG-Float</div>
		<p>Ну, а если тебе, например, нужно сделать резиновым + марджины, паддинги и бордеры. Обертки будешь городить?  Можно, конечно, но уже не так красиво.
Или, например, у тебя идет серия блоков картинка + обтекающий её текст. Блоки должны быть друг под другом. Но при небольшом контенте блоки могут встать на одну строку.</p>
	</div>
</body>
</html>

SelenIT · March 17, 2011

Имхо, inline-block скорее может претендовать на замену самим float-ам, с вкусными плюсами в виде произвольного выравнивания по вертикали и жирным минусом в виде значащих пробелов между тегами. Зато проблема необходимости в clearfix-е (в любом виде) отпадет сама собой.

Про издержки inline-block для контейнера sigma77 уже написала, так что это явно не универсальное решение. Хотя иногда может выручить.

Justnewone · March 17, 2011

ПРоблема будет в ИЕ6-7, надо дисплей инлайн и зум дописать.

Sign In

overflow:hidden

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

51 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information