Why do divs go outside the main div container?

Question

I just started learning HTML and CSS. And while following a tutorial, I just thought of some experiment.

Question is:

Why do the bottom <div>s goes outside the main <div>?

Is it because of the floating property? I think it is, if it's really so, how do I contain these floating bottom divs to the red main container div?

There are similar questions, like this CSS Float Logic but it's kinda complicated for a beginner.

.clr {
  clear: both;
}

.container {
  width: 80%;
  margin: auto;
  border: 2px solid royalblue;
  background-color: red;
}

.block {
  float: left;
  width: 33.3%;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

#main-block {
  float: left;
  width: 70%;
}

#sidebar {
  float: right;
  width: 30%;
  background-color: #333;
  color: #ffffff;
  padding: 15px;
  box-sizing: border-box;
  margin: 0;
}

<div class="container">

  <div class="block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract
      from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>
  </div>


  <div class="block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract
      from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>
  </div>


  <div class="block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract
      from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>
  </div>

  <div class="clr"></div>

  <div id="main-block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
    </p>
  </div>

  <div id="sidebar">
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” .
    </p>
  </div>

</div>

Answer 1

I think the problem is because of the position of

<div class="clr"></div>

you should put it at the end of the container. However better solution is solving this problem using css. Not HTML code. As follows:

.container:after{
   display: block;
   clear: both;
   content: "";
   height: 0;
   overflow: hidden;
}

Answer 2

You wrote:

I just started learning HTML and CSS.

So why are you focusing on floats for layouts? That's an obsolete methodology.

CSS now has Flexbox and Grid technologies, which have widespread browser support, and are ready for production websites.

Floats, which are meant for wrapping text around images, were always a hack for building layouts, because CSS offered nothing better. With the advent of CSS3, that's no longer the case.

Don't waste your time learning how to build layouts with floats.

Try this instead (using CSS Grid):

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  width: 80%;
  padding: 10px;
  margin: auto;
  border: 2px solid royalblue;
  background-color: red;
}

.block {
  grid-row: 1;
}

#main-block {
  grid-row: 2;
  grid-column: 1 / 3;
}

#sidebar {
  grid-row: 2;
  background-color: #333;
}

.block, #main-block, #sidebar {
  padding: 10px;
  border: 1px solid #ccc;
}

* {
  box-sizing: border-box;
}

<div class="container">

  <div class="block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract
      from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>
  </div>

  <div class="block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract
      from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>
  </div>

  <div class="block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract
      from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.</p>
  </div>

  <div id="main-block">
    <h3>Heading</h3>
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
    </p>
  </div>

  <div id="sidebar">
    <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.” .
    </p>
  </div>

</div>