html - 清除 :both not working when trying to place a div below floated divs

Question

我有一个 .left 向左浮动的 div 和 .right 向右浮动的 div，它们带有 .navBarWrapper div .我将 clear:both 应用于 .searchBar，但 searchBar 仍显示在页面的左上角，如蓝色矩形所示以下。如何解决这个问题？

.navBarWrapper {
  position: fixed;
  z-index: 1;
  width: 100%;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.bar {
  height: 8.02%;
  overflow: auto;
}

.searchBar {
  clear: both;
}

<div class="navBarWrapper">
  <div class="top bar">
    <ul class="left float_left">
      <li class="title">Photo Albums</li>
    </ul>
    <ul class="right float_right">
      <li class="buttons">
        <a class="iconLink" href=""><img class="iconNotHover" src="images/uploadImage.png" alt="uploadImage" width="40" align="middle" /></a>
      </li>
    </ul>
  </div>
  <div class="bottom bar">
    <ul>
      <li><a href="">Select</a></li>
      <li><a href=""><span class = "iconTitle">New Album </span><img class = "icons" src = "images/addAlbum.png" alt = "addAlbum" width="30" align = "right"/></a></li>
    </ul>
  </div>
</div>
<div class="searchBar">
  <img src="images/search.png" alt="search" width="40">
</div>

Answer 1

只需尝试从 .navBarWrapper 中删除 position: fixed;

.searchBar 相对于正文，因为 .navBarWrapper 的位置是固定的。如果您将这两个类都作为相对位置，它应该可以工作，为此只需在 .navBarWrapper 上省略位置。您也不需要将 clear: both 放在 .searchBar 上。仅当 .searchBar div 也在 navBarWrapper div 中时，清除两者才有意义。

你的最终代码应该是

.navBarWrapper {
    z-index: 1;
    width: 100%;
}

.float_left {
    float: left;
}

.float_right {
    float: right;

}

.bar {
    height: 8.02%;
    overflow: auto;
}

.searchBar {

}