Html 浮动左元素不堆叠

我有一些浮动元素的问题。 我想要的是，当您调整浏览器窗口的大小时，框3就在框1的正下方

HTML:

参见小提琴：

---

我尝试了使用clear属性的方法，但没有任何帮助。

如果您想在调整浏览器大小和达到特定尺寸时控制布局，您可能应该查看媒体查询

---

有很多关于这个主题的资料，所以我只是链接维基百科作为参考。

你只能用js做这个动态布局。例如插件。

这是预期的CSS行为。如果在打开小提琴的同时调整浏览器窗口的大小，框3将显示在框1下。如果希望框3始终显示为那样，则需要添加类似以下内容

。清除
类：

.clear{
  clear: left;
}

您会注意到，框3将显示在正确的位置，但稍微低一点，就在框2的底部边框下方。因为所有的框都是浮动的，所以CSS将它们视为在一条线上，这条线与最高的
.box
一样高。当您引入一个
.clear
ed的框时，它将显示在该行下面。您可以使用
边距顶部
调整位置，例如将框3的
元素更改为：

<div class="box clear" style="margin-top: -70px;">

500px是您所需的空间。如果框中的内容将发生很大变化，我建议不要使用此选项。
这是需要的行为。当您调整小提琴上的结果窗口时，您会看到框3位于框2下方，但我希望它正好位于框1下方，以便在下框中没有间隙it@Joum不，我试试看，我会让你know@joum不，我什么都没做。我不太明白这个要求，这就是我的建议不起作用的原因。。。对不起，我想要的是盒子3就在盒子1的正下方，有两个元素相邻的位置。好的。。。是的，我知道那个插件，但我想知道是否有CSS唯一的方法。但如果没有其他方法，我使用该插件。谢谢。是的，这是工作，但我有一个动态页面，所以这些框的内容可以每次不同，所以页边空白顶部：-70px；可能是在稍后的点利润率顶部：-120px@不幸的是，你对此无能为力。在JS中可能有一些方法可以解决这个问题，但请记住，有一种情况是工作太辛苦而无法重新发明轮子。最简单的解决方案是设计一个更好的布局，以期望动态内容更改。
.clear{
  clear: left;
}

<div class="box clear" style="margin-top: -70px;">

@media all and (max-width: 500px){
    .box.clear{
      clear: left;
      margin-top: -70px;
    }
  }