Heading element keeps showing up in the same line

Question

I'm just starting out and I created this document in which I coded a 3x3 checkerboard (yes I know there's probably a better way to do it, but that's not the point).

Beneath it I created a heading element that somehow keeps showing up in the same line as the checkerboard even though it should actually be displayed as a block element and should therefore show up in the next line.

Now, I know that I could just use <br> in my html file, but I'd really like to know the reason for this behavior and how to change it more elegantly. I assume that it has something to do with the float: left; in my CSS file but I'm not sure.

So please: how can I change my CSS code to have the heading show up in the next line as it normally should?

#checkerboard {
  width: 300px;
  height: 300px;
}

.checkone {
  float: left;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  box-sizing: border-box;
}

.checkone:nth-of-type(odd) {
  background-color: #10e364;
}

.checkone:nth-of-type(even) {
  background-color: #e016ab;
  border-right: none;
  border-left: none;
}

.checktwo {
  float: left;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  box-sizing: border-box;
}

.checktwo:nth-of-type(odd) {
  background-color: #10e364;
  border-top: none;
  border-right: none;
  border-left: none;
}

.checktwo:nth-of-type(even) {
  background-color: #e016ab;
  border-top: none;
}

.checkthree {
  float: left;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  box-sizing: border-box;
}

.checkthree:nth-of-type(odd) {
  background-color: #10e364;
  border-top: none;
}

.checkthree:nth-of-type(even) {
  background-color: #e016ab;
  border-right: none;
  border-left: none;
  border-top: none;
}


/* now comes the important part*/

#butsection {
  font-size: 15px;
}

#buthead {
  font-size: 1.5em;
  width: 100%;
  display: block;
}

<div id="checkerboard">
  <p>The checkerboard:</p>
  <div class="checkone"></div>
  <div class="checkone"></div>
  <div class="checkone"></div>
  <div class="checktwo"></div>
  <div class="checktwo"></div>
  <div class="checktwo"></div>
  <div class="checkthree"></div>
  <div class="checkthree"></div>
  <div class="checkthree"></div>
</div>

<section id="buttonsection">
  <h2 id="buttonhead">Button em/rem test</h2>
</section>

Answer 1

You have two issues:

1. in your css you have #butsection instead of #buttonsection
2. If an element can fit in the horizontal space next to the floated elements, it will. Unless you apply the clear property to that element in the same direction as the float. Then the element will move below the floated elements.

#checkerboard{
    width: 300px;
    height: 300px;
}

.checkone{
    float: left;    
    width: 100px;
    height: 100px;
    border: 2px solid black;
    box-sizing: border-box;
}

.checkone:nth-of-type(odd){
    background-color: #10e364;
}
.checkone:nth-of-type(even){
    background-color: #e016ab;
    border-right:none;
    border-left:none;
}

.checktwo{
    float: left;    
    width: 100px;
    height: 100px;
    border: 2px solid black;
    box-sizing: border-box;
}

.checktwo:nth-of-type(odd){
    background-color: #10e364;
    border-top: none;
    border-right: none;
    border-left: none;
}
.checktwo:nth-of-type(even){
    background-color: #e016ab;
    border-top: none;
}

.checkthree{
    float: left;    
    width: 100px;
    height: 100px;
    border: 2px solid black;
    box-sizing: border-box;
}

.checkthree:nth-of-type(odd){
    background-color: #10e364;
    border-top: none;
}
.checkthree:nth-of-type(even){
    background-color: #e016ab;
    border-right:none;
    border-left:none;
    border-top:none;
}


/* now comes the important part*/
#buttonsection{
clear:both;
    font-size: 15px;
}

#buthead{
    font-size: 1.5em;
    width: 100%;
    display: block;
 
}

<div id="checkerboard">
        <p>The checkerboard:</p>
        <div class="checkone"></div>
        <div class="checkone"></div>
        <div class="checkone"></div>
        <div class="checktwo"></div>
        <div class="checktwo"></div>
        <div class="checktwo"></div>
        <div class="checkthree"></div>
        <div class="checkthree"></div>
        <div class="checkthree"></div>
    </div>

    <section id="buttonsection">
        <h2 id="buttonhead">Button em/rem test</h2>
    </section>

Answer 2

Just move <p>The checkerboard:</p> out of the #checkerboard div.

#checkerboard {
  width: 300px;
  height: 300px;
}

.checkone {
  float: left;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  box-sizing: border-box;
}

.checkone:nth-of-type(odd) {
  background-color: #10e364;
}

.checkone:nth-of-type(even) {
  background-color: #e016ab;
  border-right: none;
  border-left: none;
}

.checktwo {
  float: left;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  box-sizing: border-box;
}

.checktwo:nth-of-type(odd) {
  background-color: #10e364;
  border-top: none;
  border-right: none;
  border-left: none;
}

.checktwo:nth-of-type(even) {
  background-color: #e016ab;
  border-top: none;
}

.checkthree {
  float: left;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  box-sizing: border-box;
}

.checkthree:nth-of-type(odd) {
  background-color: #10e364;
  border-top: none;
}

.checkthree:nth-of-type(even) {
  background-color: #e016ab;
  border-right: none;
  border-left: none;
  border-top: none;
}


/* now comes the important part*/

#butsection {
  font-size: 15px;
}

#buthead {
  font-size: 1.5em;
  width: 100%;
  display: block;
}

<p>The checkerboard:</p>
<div id="checkerboard">
  <div class="checkone"></div>
  <div class="checkone"></div>
  <div class="checkone"></div>
  <div class="checktwo"></div>
  <div class="checktwo"></div>
  <div class="checktwo"></div>
  <div class="checkthree"></div>
  <div class="checkthree"></div>
  <div class="checkthree"></div>
</div>

<section id="buttonsection">
  <h2 id="buttonhead">Button em/rem test</h2>
</section>

Codepen: https://codepen.io/manaskhandelwal1/pen/mdOJGRM