How can I move my content below some floated divs?

Question

I have been trying to make a web site so I can test some things, in this I was trying to put the <div>s of the container on top of the page and the rest of the content should be on the bottom of that div.

But the result that I get is the 3 <div>s with the class="square" on the left of the page and the rest of the content on the left of the container div.

So my question is, how can I correct the page layout?

And another question that I have is how does the float work?

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

score 2 · Accepted Answer · edited Jul 30 '18 at 16:15

Add clear: both to the p element to prevent floating elements on both sides of it.

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

score 1 · Answer 2 · answered Jul 30 '18 at 16:31

Since you are already using flex, why not use it for .square as well? Get rid of float at all.

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

thank you @John but if I do that all of the `
`s that I have will display one below another. I wanted to make then on the left of each other, that's why I used `float`. But for the purpose of my question, your answer worked — needHelp, Jul 30 '18 at 16:42

How can I move my content below some floated divs?

2 Answers2