尽管使用嵌套div将高度设置为auto,但CSS会流失

Question

我正在尝试为网页创建一个简单的骨架,而我的divs排队时遇到了麻烦.出于某种原因,我已将嵌套的div在其父div之外出血,即使我将父div的高度设置为auto.

这是我提出的标记:

    <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上的高度设置为auto.右侧内板也是如此(虚线).3)我希望我的主文本块出现在两个内框之下,但它们显示在它们之间.

我该如何解决这些问题？

Answer 1

添加以下内容

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

这将导致他们各自父母的浮动内容nav和div.main留在他们各自的父母.

编辑

有人指出,position: relative;在现代浏览器中可能没有必要.因此,以下应该也可以正常工作:

nav, div.main {
  overflow: hidden;
}

这是指向讨论流根的CSS规范部分的链接.设置overflow:hidden将框设置为"流根",规范定义了用于计算作为"流根"的元素的高度的特殊规则.