尽管使用嵌套 div 将高度设置为自动，但 CSS 仍然溢出

Question

我正在尝试为网页构建一个简单的骨架，但我在排列 div 时遇到了问题。出于某种原因，即使我将父 div 的高度设置为自动，我也会在其父 div 之外嵌套 div。

这是我设置的标记:

    <h1><center>Title</center></h1>

    <div class="main">
        <nav>
            <div class="button">
                Link 1
            </div>                  
            <div class="button">
                Link 2
            </div>
            <div class="button">
                Link 3
            </div>
        </nav>
        <br/>
        <br/>

        <div class="mainPic">

        </div>

        <div class="sideText">

        </div>

        <p>
            Main text.
        </p>
    </div>

这是我修改 div 的 CSS:

div.main {
    border: 1px solid black;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    height: auto;
    padding: 20px;
}

nav {
    border: 1px dashed black;
    width: auto;
    height: auto;
}

div.button {
    border: 1px solid black;
    padding: 2px;
    float: left;
    margin-right: 10px;

}

div.mainPic {
    border: double black;
    width: 60%;
    float: left;
    height: 50px;
}

div.sideText {
    border: dotted black;
    width: 30%;
    float: right;
    height: 50px
}

我的问题是: 1) 导航就像它里面什么也没有一样(虚线)，即使我有我的按钮类嵌套在里面。 2) 我的“mainPic”(双实线)div 流出我的“main”div，即使 main 上的高度设置为自动。右侧内面板(虚线)也是如此。 3) 我希望我的主文本 block 出现在两个内部框的下方，但它却出现在它们之间。

我该如何解决这些问题？

Answer 1

添加以下内容

nav, div.main {
  position: relative;
  overflow: hidden;
}

这将导致 nav 和 div.main 的 float 内容保留在它们各自的父级内部。

---

编辑

有人指出 position: relative; 在现代浏览器中可能不是必需的。因此，以下应该同样有效:

nav, div.main {
  overflow: hidden;
}

这是 CSS 规范中讨论 flow root 部分的链接.设置 overflow:hidden 将一个框建立为“流根”，规范定义了 special rules for computing the height of an element that is a "flow root" .