盒子模型问题

Question

我只是玩布局，我遇到了问题。

我的标题元素被直接推到容器的顶部

http://codepen.io/anon/pen/CslkH

我错过了一些东西，但我想不出来！

我甚至设置了一个保证金顶部，它仍然是推到容器的顶部？

请帮助家伙

Answer 1

您的.header有margin-top: 25px，由于保证金崩溃，导致.container也向下移动。

而不是top-margin，而是使用padding-top上的.container。

这是您更新过的笔：http://codepen.io/anon/pen/pbvFI

Answer 2

将overflow:auto添加到您的#container div：

#container {
    background-color: #93C;
    width: 1000px;
    height: 1000px;
    overflow:auto;
}

<强> jsFiddle example

您的浮动正在导致这种情况并设置溢出会恢复块格式化上下文。