我该把我的清除方法放在哪里来清除浮子？

Question

我想使用清除修复清除浮动在我的导航，所以容器的高度将是它的子元素的高度。但我不知道该把我的解决办法放哪儿。

这是我的html：

<div class="container">

            <nav id="nav">
                <a href="#principle_1">1</a>
                <a href="#principle_2">2</a>
                <a href="#principle_3">3</a>
                <a href="#principle_4">4</a>
                <a href="#principle_5">5</a>
                <a href="#principle_6">6</a>
                <a href="#principle_7">7</a>
                <a href="#principle_8">8</a>
                <a href="#principle_9">9</a>
                <a href="#principle_10">10</a>
                <div class="clear"></div>
            </nav>

      </div>

我发现当我把清晰的修正放在导航中时，它会清除导航器子元素的浮动。当我把它放在导航之外，但在容器中，它也能工作。(见下面的代码)因为这两个位置都工作，我不知道这两个位置之间有什么区别。

<div class="container">

            <nav id="nav">
                <a href="#principle_1">1</a>
                <a href="#principle_2">2</a>
                <a href="#principle_3">3</a>
                <a href="#principle_4">4</a>
                <a href="#principle_5">5</a>
                <a href="#principle_6">6</a>
                <a href="#principle_7">7</a>
                <a href="#principle_8">8</a>
                <a href="#principle_9">9</a>
                <a href="#principle_10">10</a>

          </nav>
          <div class="clear"></div>

      </div>

Answer 1

如果一个元素只包含浮动的元素，那么它的高度就会折叠为零。这就是为什么容器在没有清除的情况下没有高度。如果您希望容器始终能够调整大小，以便在容器中包含浮动元素，则需要自动清除其子容器。这样容器就能恢复高度。一种方法是使用清除。

    <div class="clearfix"></div>

    .clearfix {
      clear: both;
    }

清除器将清除其子节点上的浮子。因此，在您的代码中，如果您将清除#nav，它将清除所有a标记的浮点。所以nav会有高度。所以container也有高度。在下面的例子中，导航和容器都有高度，所以它们都有背景色。

​

.clearfix {
  clear: both;
}

.container {
    margin-left: auto;
    margin-right: auto;
  background: pink;
}

#nav {
  background: blue;
}

#nav a {
    width: 97.8px;
    display: block;
    float: left;
    text-align: center;
    line-height: 50px;
    font-family: 'robotomedium';
    text-decoration: none;
    color:#000;
}

<div class="container">
            <nav id="nav">
                <a href="#principle_1">1</a>
                <a href="#principle_2">2</a>
                <a href="#principle_3">3</a>
                <a href="#principle_4">4</a>
                <a href="#principle_5">5</a>
                <div class="clearfix"></div>
            </nav>
</div>

​

如果您在clearfix中插入container，它也将清除a标记上的浮点。但是#nav会崩溃，因为您没有清除它内部的浮点数。因此，在浏览器中，a标记成为container的直接子标记。在下面的前例中，#nav没有高度，但是container有。

​

.clearfix {
  clear: both;
}

.container {
    margin-left: auto;
    margin-right: auto;
   background: pink;
}

#nav {
  background: blue;
}


#nav a {
    width: 97.8px;
    display: block;
    float: left;
    text-align: center;
    line-height: 50px;
    font-family: 'robotomedium';
    text-decoration: none;
    color:#000;
}

<div class="container">
            <nav id="nav">
                <a href="#principle_1">1</a>
                <a href="#principle_2">2</a>
                <a href="#principle_3">3</a>
                <a href="#principle_4">4</a>
                <a href="#principle_5">5</a>
            </nav>
            <div class="clearfix"></div>
</div>

​

，所以关键是清除元素的子元素，以防止该元素崩溃。

Answer 2

将导航元素括起来，使其成为清除程序的子元素。

层次结构应该如下所示：div.container > div.clear > nav