盒子模型問題

Question

我只是在玩布局游戲，而我遇到了問題。

我的header元素被推到了容器的頂部

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

我想念什么，但我想不到！

我什至設置了一個邊距頂部，它仍然被推到容器的頂部嗎？

請幫助家伙

Answer 1

您的.header有一個margin-top: 25px ，由於margin崩潰，導致.container也向下移動。

代替該top-margin ，在.container上使用padding-top 。

這是您更新的筆： http : //codepen.io/anon/pen/pbvFI

Answer 2

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

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

jsFiddle示例

浮點數會導致這種情況，設置溢出將恢復塊格式化上下文。