将div放在包含多个div的包装器下面

Question

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

但我总是最终得到这个：

或者这个：

这是我的代码：

HTML

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您还可以重置主容器的block formating context，因此它会考虑浮动元素的内部和外部。

这里最简单的是添加：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>

Answer 2

您需要清除<div>。在clear: both;上使用.newdiv6：

.newdiv2,
.newdiv3,
.newdiv4,
.newdiv5 {
  width: 25px;
  height: 25px;
  margin-bottom: 5px;
  border: 3px solid black;
}
.newdiv6 {
  width: 150px;
  height: 150px;
  border: 3px solid black;
  clear: both;
}
.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>

在数字后面也使用px，否则无效。

预览