Странный эффект у плавающего дива

[indysiteru]

Я обнаружил странный эффект у плавающих дивов. Конечно же, мне известно, что поведение элемента со свойством float таит в себе множество сюрпризов. Но данный обнаруженный мною эффект кроссбраузерен за исключением старых версий IE. Поэтому мне кажется, что в стандартах должно быть хоть какое-то объяснение. В примере див в потоке расположен выше тега параграфа, но почему-то получается так, что если див сделать плавающим, то для него сверху окажут воздействие марджины параграфа, расположенного ниже. В примере видно, что сверху над дивом есть марджины (которые являются марджинами параграфа). Что это за особенность?

[Nekromancer]

Схлопывание бательнка, схлопывание.

Если вы посмотрите на размер body, то как раз увидите, что div находится там где надо, ровно по краю body, а отступы находятся за предемали.

http://jsfiddle.net/QS9qJ/5/

overflow:hidden; - решает всё

[indysiteru]

Схлопывание бательнка, схлопывание.

Я делаю у дива марджины и ситуация повторяется.

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

[hedgehog]

Я делаю у дива марджины и ситуация повторяется.

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

Может, все-таки почитаете про схлопывание отступов?

http://jsfiddle.net/QS9qJ/21/

Во втором примере 20пиксельный margin у .prevent-collapse опускает body на 20px вниз из-за схлопывания. А уже внутри .prevent-collapse схлопывания не происходит, поэтому у абзаца появляется отступ в 50px ОТ границы .prevent-collapse