css - 容器边框只包裹标题和导航，而不是整个容器

Question

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

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

谁能帮助我了解我需要做些什么不同的事情？也欢迎任何其他批评。

PS 我正在学习并尝试将 .PSD 转换为 HTML，并附有我在互联网上找到的教程。这是我找到的一个。

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

.clear {clear: both;}

在教程中学习浮点数，你会经常使用它。

2 回答 2