为什么我的浮动容器位于div之下而不是从新行开始

Question

即使我使用page-button-container，我的display: block也不是从新开始的。它正在我的test-pics-container下。为什么会这样，我该如何解决？我发现，如果我从float: right重新加载page-button-container，则它可以正常工作（但随后它不会向右浮动。

我希望它看起来像这样：

.test-lookup-container {
  position: relative;
  display: block;
  width: 1000px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 20px 26px;
  box-sizing: border-box;
  background-color: purple;
}

.page-buttons-container {
  position: relative;
  display: block;
  width: 400px;
  height: 70px;
  margin: 0;
  padding: 0;
  float: right;
  background-color: orange;
}

.test-pics-container {
  position: relative;
  display: block;
  width: 900px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 0 26px;
  box-sizing: border-box;
  background-color: red;
}

.test-item {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 700px;
  margin: 0;
  padding: 0;
  background-color: #ececec;
}

<div class="test-lookup-container">
  <div class="page-buttons-container">
    ssssssssssssssss
  </div>
  <div class="test-pics-container">
    <div class="test-item">
      <img alt="" src="test.png">
    </div>
  </div>
</div>

Answer 1

您需要清除浮动元素<div style="clear: both;" ></div>

.test-lookup-container {
  position: relative;
  display: block;
  width: 1000px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 20px 26px;
  box-sizing: border-box;
  background-color: purple;
}

.page-buttons-container {
  position: relative;
  display: block;
  width: 400px;
  height: 70px;
  margin: 0;
  padding: 0;
  float: right;
  background-color: orange;
}

.test-pics-container {
  position: relative;
  display: block;
  width: 900px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 0 26px;
  box-sizing: border-box;
  background-color: red;
}

.test-item {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 700px;
  margin: 0;
  padding: 0;
  background-color: #ececec;
}

<div class="test-lookup-container">
  <div class="page-buttons-container">
    ssssssssssssssss
  </div>
  <div style="clear: both;" ></div>
  <div class="test-pics-container">
    <div class="test-item">
      <img alt="" src="test.png">
    </div>
  </div>
</div>

Answer 2

最简单的方法是添加以下规则。

.test-pics-container { overflow: hidden; }

但是，如果overflow属性隐藏了位于.test-pics-container外部的某些内容，则可以使用“ clearfix”方法。

.clearfix:after { content: ""; display: table; clear: both; }

然后您可以像这样使用它：

<div class="test-pics-container clearfix">
   ...
</div>

Answer 3

不要使用float来创建布局，它存在许多初学者无法理解或处理的问题。

这是您要创建的吗？

.test-lookup-container {
  position: relative;
  display: block;
  width: 1000px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 20px 26px;
  box-sizing: border-box;
  background-color: purple;
}

.page-buttons-container {
  position: absolute;
  width: 400px;
  height: 70px;
  background-color: orange;
  right: 0;
  top: -70px;
}

.test-pics-container {
  position: relative;
  display: block;
  width: 900px;
  height: auto;
  margin: 0 auto 0 auto;
  padding: 0 26px;
  box-sizing: border-box;
  background-color: red;
  margin-top: 70px;
}

.test-item {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 700px;
  margin: 0;
  padding: 0;
  background-color: #ececec;
}

<div class="test-lookup-container">
  <div class="test-pics-container">
    <div class="page-buttons-container">
      page-buttons-container
    </div>
    <div class="test-item">
      test-item
    </div>
  </div>
</div>