为什么我的浮动容器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-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>

Answer 3

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

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

但是，如果overflow财产隐藏了一些内容，即位于.test-pics-container之外，你可以使用“clearfix”的做法。

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

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

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