HTML5标签与Div自动调整大小的区别

Question

我希望能够找到解决方案，但最坏的情况是，我需要一个解释为什么我的div没有调整大小，可能是因为我使用了nav标签。

我有以下的HTML代码。当'section'标签中的内容增加时，带有类名“page-content”的div也会增大。然而，当我的导航菜单项增加时，该div不会调整大小。

<div class="page-content">
    <nav>
      <ul>{menu items here}</ul>
    </nav>
    <section id="main">
        {bunch of text here}
    </section>
</div>

以下是我的CSS。

.page-content 
{
    display: block;
    position:relative;
    width: 100%;
   margin-left: auto;
    margin-right: auto;
    background-image: url(images/bg-home-main.jpg);
    background-repeat: no-repeat;
    background-position: center;

}

    nav {
    display: block;
    float: left;
    padding: 15px;
    position: relative;
    margin: 0px 0px 0px -45px;
}

#main {
    padding: 5px 25px 5px 25px;
    margin-left: 175px;
}

我的问题是，该div拥有一个背景图像，应该覆盖导航栏和部分区域的背景。但是，只有当我的部分区域比导航栏更大（从上到下）时，这才会发生，因为div将拉伸以适应部分大小。然而，如果我的导航栏区域更大，它实际上会扩展到div之外，因此也超出了图像范围。

- Jeff Reddy

---

当您浮动一个元素时，它会脱离文档流，并且不会扩展其包含元素。解决此问题的一种方法是将 overflow: hidden; 添加到包含元素中。 - kinakuta

@kinakuta：太好了！你能把它作为答案发布一下，这样我就可以接受它了。另外，你能解释一下为什么它有效吗？让它工作是一回事，理解为什么它有效是另一回事。 - Jeff Reddy

Answer 1

当你浮动一个元素时，它会脱离文档流，并且不会扩大它所在的容器。解决这个问题的一种方法是在容器元素中添加 overflow: hidden;。使用 overflow: hidden; 是 clearfix 的一种形式 - 一种修复方法，使包含元素扩展以显示任何浮动的，包含的元素。实际上，任何 overflow 的值都可以工作，但是 overflow: auto 在 Mac 上的 Explorer 中会导致滚动条（不确定是否还有人在使用）。对于某些版本的 IE，您还需要包含一个宽度值才能使其正常工作。还有其他的 clear fixes，通常涉及在浮动元素后插入一些清除该浮动元素的元素，同时导致包含元素扩展以包含它 - 一个高度为零但应用了 clear 属性的 div，或者使用 :after 伪元素，但我通常使用 overflow，因为它不添加任何表示性标记。

- kinakuta