html - 将一个 div 放置在包含多个 div 的包装器下方

Question

这可能很简单。下面是我要创建的结构:

但我总是以这样的方式结束:

或者这个:

这是我的代码:

HTML

.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
  width: 25px;
  height: 25px;
  margin-bottom: 5px;
  border: 3px solid black;
}
.newdiv6 {
  width: 150;
  height: 150;
  border: 3px solid black;
}
.newdiv {
  height: 250px;
  width: 450px;
  float: left;
  border: 3px solid black;
}
.divwrapper {
  float: left;
  border: 3px solid blue;
}
.mainwrapper {
  display: block;
}

<div class="mainwrapper">
  <div class="newdiv"></div>
  <div class="divwrapper">
    <div class="newdiv2"></div>
    <div class="newdiv3"></div>
    <div class="newdiv4"></div>
    <div class="newdiv5"></div>
  </div>
</div>
<div class="newdiv6"></div>

这看起来像上面的第二张图片(在我的 Chrome 浏览器中)。

Answer 1

您还可以重置 block formating context主容器，因此它会注意 float 元素的内部和外部。

这里最简单的是添加:overflow:hidden; 因为不涉及大小

.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
  width: 25px;
  height: 25px;
  margin-bottom: 5px;
  border: 3px solid black;
}
.newdiv6 {
  width: 150px;
  height: 150px;
  border: 3px solid black;
}
.newdiv {
  height: 250px;
  width: 450px;
  float: left;
  border: 3px solid black;
}
.divwrapper {
  float: left;
  border: 3px solid blue;
}
.mainwrapper {
  display: block;
  /* reset bfc */
  overflow:hidden;
}

<div class="mainwrapper">
  <div class="newdiv"></div>
  <div class="divwrapper">
    <div class="newdiv2"></div>
    <div class="newdiv3"></div>
    <div class="newdiv4"></div>
    <div class="newdiv5"></div>
  </div>
</div>
<div class="newdiv6"></div>