清楚：当试图将div放在浮动div之下时两者都不起作用

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试从position: fixed;

中删除.navBarWrapper

.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 {

}