Что такое контекст форматирования?

[FanAizu]

Когда читал о свойстве float или про overflow:hidden, то увидел термин "контекст исполнения". Писалось, что при использовании этих свойств создается новый контекст исполнения. Вопросы:

1) Что такое контекст исполнения? В инете искал, на нашел!

2) На что влияет контекст исполнения?

3) Какие свойства по стандарту создают новый контекст исполнения?

[clavin]

Искать надо на английском. Как на английском пишется "контекст исполнения"? Ещё лучше, если дадите ссылку на стандарт, где это увидели.

Если читаете стандарт на русском, то там какое-то объяснение тоже должно быть.

[Svatov]

http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html

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 for their contents.

9.4.2 Inline formatting contexts

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

Это вырезка, чтобы легче тебе было найти. Для более глубокого понимания лучше прочесть и разобрать весь раздел.

А вообще уже надо бы HTML5 почитывать там немного терминология меняется, лучше привыкать сразу.

Edited April 29, 2012 by Svatov

[FanAizu]

Извиняюсь, не контекст исполнения, а контекст форматирования. Вот перевод абзаца из css спецификации:

Плавающим (float), абсолютно спозиционированным, отображаемым как табличные ячейки (table-cell) или заголовки таблиц (table-caption), строково-блоковым (inline-block) и элементам со свойством overflow и его значением отличными от visible (не считая случаев, когда значение наследуется областью просмотра) устанавливается новый контекст для форматирования

[FanAizu]

http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html

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 for their contents.

9.4.2 Inline formatting contexts

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

Это вырезка, чтобы легче тебе было найти. Для более глубокого понимания лучше прочесть и разобрать весь раздел.

А вообще уже надо бы HTML5 почитывать там немного терминология меняется, лучше привыкать сразу.

Что значит здесь "establish new block formatting contexts for their contents."? Это означает, что эти элементы становятся блочными элементами? Или нет?

[SelenIT]

Как я понимаю (хотя явного определения в спеке мне найти не удалось, но из описания поведения блоков в ней это логично вытекает) контекст форматирования показывает, что блоки в нем никак не взаимодействуют с другими блоками, находящимися вне контекстов. Т.е. прямоугольная область, полностью охватывающая все живущие в ней блоки (включая плавающие), со всеми их margin-ами и другими выступающими частями тела. Я когда-то пытался продемонстрировать это в этой демке (без создания контекста желтый верхний margin заголовка и "хвост" высокого поплавка торчат из зеленого блока наружу и цепляют соседние блоки, а при создании контекста "запираются" внутри него). Вот еще немножко по теме вдогонку)

А вообще уже надо бы HTML5 почитывать там немного терминология меняется

Как раз тут HTML5 абсолютно ни при чем. Контексты форматирования (блочный и строчный) — это исключительно CSS (пока что 2.1). И это надолго

[Svatov]

А вообще уже надо бы HTML5 почитывать там немного терминология меняется

Как раз тут HTML5 абсолютно ни при чем. Контексты форматирования (блочный и строчный) — это исключительно CSS (пока что 2.1). И это надолго

На самом деле я в эти слова вкладывал немного другой смысл, а именно этот материал

http://developers.whatwg.org/content-models.html, который контекста исполнения не касается, но кругозор расширит

Чтобы потом человек не путался в терминологии и отделял CSS и контентные модели элементов.

Edited April 29, 2012 by Svatov

[FanAizu]

Почему, если есть такая верстка, то свойство clear не действует на float-элемент, который находится выше в документе?:

<div>

<div style="float:left;width:50px;">

hello

</div>

<div style="float:left;width:50px;">

world

<div style="clear:both;">

</div>

</div>

</div>

[clavin]

Вот здесь дано определение "блочного контекста форматирования". Хорошее объяснение на английском можно посмотреть.

Очень хорошо сказано здесь, что новый блочный контекст форматирования создаётся у элемента, которому назначаются одно из следующих свойств:

float: left

float: right

position: absolute

display: inline-block

display: inline-table

display: table-cell

display: table

overflow: auto

overflow: scroll

overflow: hidden

Если каждый из двух рядом находящихся блоков имеют свой блочный контекст форматирования, то у этих блоков не может быть, например, коллапса марджинов. А если внутри одного такого блока есть плавающий элемент со свойством float, то можно гарантировать, что этот плавающий элемент никоим образом не провзаимодействует с элементами из соседнего блока, ведь у них у каждого есть свой блочный контекст форматирования.

<div>

<!-- Здесь первый контекст форматирования -->
 <div style="float:left;width:50px;">
  hello
 </div>

<!-- Здесь другой контекст форматирования -->
 <div style="float:left;width:50px;">
  world
  <div style="clear:both;"><!-- Этот блок не может взаимодействовать с блоками из другого контекста форматирования -->
  </div>
 </div>
</div>

Ещё здесь на английском есть отличия, которые имеют современные браузеры от IE6 и IE7 при создании новых блочных контекстов форматирования. Тоже полезное чтение.

Edited April 29, 2012 by clavin

[SelenIT]

Почему, если есть такая верстка, то свойство clear не действует на float-элемент, который находится выше в документе?:

Именно потому, что этот clear сидит в своем отдельном блочном контексте (образованном его родительским float-ом).

Вот здесь дано определение "блочного контекста форматирования".

Честно говоря, именно определения "КФБ - это..." я там не вижу. И главного свойства отдельного контекста (изолированности внутренних блоков от соседей) из этих абзацев, имхо, не вытекает, оно описано в др. разделах (в частности, в описаниях флоатов и margin collapsing-а).

Если каждый из двух рядом находящихся блоков имеют свой блочный контекст форматирования, то у этих блоков не может быть, например, коллапса марджинов.

Не может быть коллапса с их потомками. Друг с дружкой, если они сами сидят в одном контексте - запросто.

[clavin]

Честно говоря, именно определения "КФБ - это..." я там не вижу. И главного свойства отдельного контекста (изолированности внутренних блоков от соседей) из этих абзацев, имхо, не вытекает, оно описано в др. разделах (в частности, в описаниях флоатов и margin collapsing-а).

Стандарты сами грешат неполнотой. Хорошо бы, если они в самом начале написали однозначные термины, которыми постоянно пользовались бы в тексте. Так было гораздо эффективнее для понимания этих стандартов.

В этой демонстрации коллапса марджинов я убрал для дивов overflow:hidden; и указал для них ширину. Если этот пример посмотреть в современных браузерах и IE7, то можно увидеть, что современные браузеры не создают новый блочный контекст форматирования для каждого дива, а в IE7 они создаются.

[SelenIT]

Стандарты сами грешат неполнотой. Хорошо бы, если они в самом начале написали однозначные термины, которыми постоянно пользовались бы в тексте. Так было гораздо эффективнее для понимания этих стандартов.

+100500!

В этой демонстрации коллапса марджинов я убрал для дивов overflow:hidden; и указал для них ширину. Если этот пример посмотреть в современных браузерах и IE7, то можно увидеть, что современные браузеры не создают новый блочный контекст форматирования для каждого дива, а в IE7 они создаются.

Строго говоря, в IE5-7 создается "layout", который во многом похож по поведению на контекст форматирования блоков. Но не во всём.

[FanAizu]

clavin, в Вашем примере указано, что margin-ы заголовков и абзацев не схлопываются с margin-ами div-ов, в которых они находятся, но это не так они схлопываются.

[SelenIT]

В его примере текст остался от моего, где действительно не схлопывались. А тут, да, текст оказывается правдивым только в IE7 и ниже

[clavin]

clavin, в Вашем примере указано, что margin-ы заголовков и абзацев не схлопываются с margin-ами div-ов, в которых они находятся, но это не так они схлопываются.

На текст в моём примере не обращайте внимания. Этот текст старого примера, который создал SelenIT, и я этот текст не изменил, хотя надо было

Edited April 30, 2012 by clavin