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

Question

我一直在尝试制作一个网站，以便我可以测试一些东西，在此我试图将容器的 <div>s 放在页面顶部，其余内容应该在那 div 的底部。

但我得到的结果是 3 <div>s，页面左侧有 class="square"，其余内容位于容器左侧 div .

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

我的另一个问题是 float 是如何工作的？

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

在 p 元素中添加 clear: both 以防止其两侧出现浮动元素。

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

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

How can I move my content below some floated divs?

html

css

css-float