troll

А между .upper и .floated тогда сколько? 30px? Получается, у .upper 2 отступа (один общий с .lower, другой между .upper и .floated)?

По каким принципам определяется положение floated-блока, когда он находится между двумя блоками со схлопывающимися отступами? Например, в такой ситуации: <div class="upper" style="margin-bottom: 30px;">some content</div> <div class="floated" style="float: left;">some content</div> <div class="lower" style="margin-top: 50px;">some content</div> Естественно, размещение легко выяснить опытным путем, но меня больше интересуют правила, согласно которым вычисляются позиции блоков в подобных случаях.

Это не совсем верно: позади фона body может быть что угодно, а вот позади фона canvas, наверное, уже вряд ли что-то может быть, хотя точно я не знаю. Соль в том, что фон body переносится на canvas, только если у html background: transparent и background-image: none. Если немного модифицировать наш код html {background: white;} #grey_box { width: 200px; height: 200px; border: solid 1px #ccc; background: #ddd; position: relative ; } #blue_box { width: 100px; height: 100px; border: solid 1px #4a7497; background: #8daac3; position: relative; z-index: -1; } и применить grey_box к body, а blue_box к потомку body, то потомок скроется под фоном body.

Можно я отвечу?) Я понимаю это так: background для body устанавливает background для canvas (спецификация: background), а canvas отображается "ниже" элементов с любыми z-index (спецификация: порядок отрисовки). В общем, по сути, примерно тоже самое, о чем говорил Softlink)