容器边框仅包装标头和导航，而不是整个容器

Question

jsfiddle：http://jsfiddle.net/Joshi3s/2gMWf/1/

我正在尝试将整个容器包裹在1px实心边框中......但它只包裹了标题和导航。

我觉得浮动是一个问题，但我不确定。

任何人都可以帮助我了解我需要采取哪些不同的做法？任何其他批评也是受欢迎的。

P.S。我正在学习并尝试将.PSD转换为HTML，我在互联网上找到了教程。这是我找到的。

Answer 1

将overflow: hidden添加到您的#container定义：

#container {
    width: 1000px;
    margin: 0 auto;
    border: 1px solid black;
    overflow: hidden;
}

浮动元素将从页面上正常的块级元素流中删除，因此添加overflow属性会使父级的高度包含子级，就好像它们没有浮动一样。

Answer 2

你只是忘了清理漂浮物。放一个像<div style="clear: both;"></div>这样的div 在容器div的末尾。

在它工作之后，您可以创建一个名为clear的类，并用它来清除浮动

.clear {clear: both;}

在教程中研究浮点数，你将会使用它。