html - 为什么我的 float 容器在我的 div 下，而不是从一个新行开始

Question

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

我希望它看起来像这样:

.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

您需要清除 float 元素<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>