Question

我想使用clear-fix来清除导航中的浮动，因此容器的高度将是其子元素的高度。但我不知道在哪里可以解决问题。

这是我的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>

我发现当我在导航中放入clear-fix时，它会清除nav子元素的浮动。当我把它放在nav之外，但是在容器中，它也可以工作。（见下面的代码）由于这两个位置都有效，我不确定这两个位置之间有什么区别。

<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

将nav元素包含在内，使其成为clearfix的子元素。

层次结构应如下所示："world"

Answer 2

如果一个元素只包含浮动元素，它的高度会折叠为空。这就是为什么容器没有 clearfix 就没有高度的原因。如果您希望容器始终能够调整大小，以便在其中包含浮动元素，则需要自行清除其子项。所以容器将重新获得高度。一种方法是使用 clearfix。

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

    .clearfix {
      clear: both;
    }

clearfix 将清除其子项上的浮动。因此，在您的代码中，如果您将 clearfix 放在 #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>

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

我在哪里清楚地解决浮动问题？

2 个答案: