关于html：如何将我的内容移动到一些浮动的div下面？

How can I move my content below some floated divs?

本问题已经有最佳答案，请猛点这里访问。

我一直在尝试建立一个网站，这样我可以测试一些东西，在这个过程中，我试图把容器的放在页面的顶部，其余的内容应该放在该分区的底部。

但我得到的结果是3个，其中class="square"在页面左侧，其余内容在container div左侧。

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

我还有一个问题是，float是如何工作的？

1
2
3
4
5
6
7
8
9
10

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

1
2
3
4
5
6
7
8
9
10
11
12

Quadrado 1
Quadrado 2
Quadrado 3

<p>
this paragraph should be under the div with the"container" class
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed a porttitor nisl. Praesent a nisl nec nisi interdum efficitur a nec metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed a porttitor nisl. Praesent a nisl nec nisi interdum efficitur a nec metus.

将clear: both添加到p元素中，以防止其两侧的浮动元素。

1
2
3
4
5
6
7
8
9
10

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

1
2
3
4
5
6
7
8
9
10
11

Quadrado 1
Quadrado 2
Quadrado 3

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

既然你已经在使用flex，为什么不把它也用于.square？把float全部除掉。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

1
2
3
4
5
6
7
8
9
10
11
12