CSS-on-Wrap-Clear-All

我有一个盒子的申请。大盒子是300px乘300px，小盒子是150px乘150px。单击一个小框时，它会变成一个大框。这些框的样式都是float:left，并允许在调整窗口大小时进行换行

不幸的是，任何被包装的小盒子都会在一行中最后一个大盒子的右边结束（如图所示）

1） 我如何允许包装，同时确保包装盒完全清除线路？（在我的示例中，方框6和7应位于方框8的左侧）

2） 有没有办法让方框6和7填充方框1和2下的空白，然后用方框8和以上填充方框4和5下的空白

正如Matt在评论中所建议的，使用

内联块

已经被问过了，在CSS中是不可能的。查看或获取JS解决方案

---

这在纯CSS中是不可能的。为此，您需要一个JS网格引擎。1）

显示：在这种情况下，内联块

可能比浮动块工作得更好。2） 不仅仅是CSS。