Google Developer Tools и UL

[DrStrangeLove]

В этом примере.. (нашёл тут на форуме)

Google Developer Tools у меню показывает ширину/высоту UL [800 x 0]

Почему высота у UL нулевая?? Ведь внутри него лишки, а в них ещё ашки??

[SelenIT]

Лишки плавающие, а значит, выпавшие из потока, а значит, не влияющие на высоту предка. А других потомков у уэлки нет...

[DrStrangeLove]

  On 10/15/2011 at 5:40 PM, SelenIT said:

Лишки плавающие, а значит, выпавшие из потока, а значит, не влияющие на высоту предка. А других потомков у уэлки нет...

А ашки внутри лишек разве не влияют на высоту UL??

Вот в этом примере слева у меню он показывает высоту UL, хотя лишки тоже плавающие..

[SelenIT]

Там UL-ка сама плавающая, это создает отдельный контекст форматирования. Из контекста float-ы вырваться уже не могут, он поневоле охватывает их. Такой же эффект дает overflow: hidden/auto (часто используемый для борьбы с "вываливанием float-ов") и display:inline-block/table/table-cell.

[psywalker]

  On 10/15/2011 at 5:49 PM, DrStrangeLove said:

  On 10/15/2011 at 5:40 PM, SelenIT said:

Лишки плавающие, а значит, выпавшие из потока, а значит, не влияющие на высоту предка. А других потомков у уэлки нет...

А ашки внутри лишек разве не влияют на высоту UL??

Вот в этом примере слева у меню он показывает высоту UL, хотя лишки тоже плавающие..

Потому что у Улки стоит

#navbar ul {

float: left;

Edited October 15, 2011 by psywalker
Опоздал. Камрад опередил :)

[DrStrangeLove]

А ашки внутри лишек разве не влияют на высоту UL??

[psywalker]

  On 10/15/2011 at 7:11 PM, DrStrangeLove said:

А ашки внутри лишек разве не влияют на высоту UL??

Нет. Проверь.

#navbar ul {
    background: red;
    margin: 0;
    padding: 0 0 0 3px;

[DrStrangeLove]

  On 10/15/2011 at 7:17 PM, psywalker said:

  On 10/15/2011 at 7:11 PM, DrStrangeLove said:

А ашки внутри лишек разве не влияют на высоту UL??

Нет. Проверь.

#navbar ul {
    background: red;
    margin: 0;
    padding: 0 0 0 3px;

Понятно.

А если в качестве контейнера для флоатов будет не плавающий элемент, не overflow: hidden/auto и не display:inline-block/table/table-cell , а position:absolute или position:relative?? Тогда UL высота тоже будет ненулевая как и для названных случаев??

Edited October 15, 2011 by DrStrangeLove

[SelenIT]

С absolute — да, с relative — нет. Случаи, когда создается новый контекст форматирования блоков, перечислены в п. 9.4.1 спеки:

  Quote

Float-ы, абсолютно позиционированные элементы, контейнеры блоков, не являющиеся блоками (такие как инлайн-блоки, ячейки и заголовки таблиц) и блоки с overflow, не равным 'visible', задают новый контекст форматирования блоков.

[DrStrangeLove]

  On 10/15/2011 at 8:40 PM, SelenIT said:

С absolute — да, с relative — нет. Случаи, когда создается новый контекст форматирования блоков, перечислены в п. 9.4.1 спеки:

  Quote

Float-ы, абсолютно позиционированные элементы, контейнеры блоков, не являющиеся блоками (такие как инлайн-блоки, ячейки и заголовки таблиц) и блоки с overflow, не равным 'visible', задают новый контекст форматирования блоков.

А когда position:relative; используют для задания координатной "сетки". Чтобы позиционировать относительно такого элемента? Это немного другое??

[SelenIT]

Да, это другое. Абсолютно позиционированные потомки отсчитываются от этого элемента (п. 10.1 спеки), но нового контекста форматирования обычных, не позиционированных блоков (в т.ч. плавающих) в нем не создается, и float-ы по-прежнему из него "вываливаются".

[DrStrangeLove]

  On 10/15/2011 at 9:59 PM, SelenIT said:

Да, это другое. Абсолютно позиционированные потомки отсчитываются от этого элемента (п. 10.1 спеки), но нового контекста форматирования обычных, не позиционированных блоков (в т.ч. плавающих) в нем не создается, и float-ы по-прежнему из него "вываливаются".

Спасибо!!