如何将内容移动到一些浮动div下方？

Question

我一直试图建立一个网站，以便可以测试一些东西，为此，我试图将容器的Param放在页面顶部，其余内容应该放在该div的底部。

但是我得到的结果是3个<div>，其中<div>位于页面左侧，其余内容位于容器div的左侧。

所以我的问题是，如何纠正页面布局？

我还有一个问题是class="square"是如何工作的？

float

.square {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3e3e3;
  float: left;
  margin: 40px 40px;
}

Answer 1

在clear: both元素中添加p，以防止其两侧都有浮动元素。

.square {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3e3e3;
  float: left;
  margin: 40px 40px;
}

<div id="container">
  <div class="square">Quadrado 1</div>
  <div class="square">Quadrado 2</div>
  <div class="square">Quadrado 3</div>
</div>
<div>
  <p style="clear: both;">this paragraph should be under the div with the "container" class</p>
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h1>
  <h2>Sed a porttitor nisl. Praesent a nisl nec nisi interdum efficitur a nec metus.</h2>
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h1>
  <h2>Sed a porttitor nisl. Praesent a nisl nec nisi interdum efficitur a nec metus.</h2>
</div>

Answer 2

既然您已经在使用flex，为什么不也将它用于.square？完全摆脱float。

.container {
  display: flex;
  justify-content: center;
}    

.square {
  width: 100px;
  height: 100px;
  background: #e3e3e3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 40px;
}

<div id="container" class="container">
  <div class="square">Quadrado 1</div>
  <div class="square">Quadrado 2</div>
  <div class="square">Quadrado 3</div>
</div>
<div>
  <p>this paragraph should be under the div with the "container" class</p>
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h1>
  <h2>Sed a porttitor nisl. Praesent a nisl nec nisi interdum efficitur a nec metus.</h2>
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h1>
  <h2>Sed a porttitor nisl. Praesent a nisl nec nisi interdum efficitur a nec metus.</h2>
</div>