DONT ADD ANYTHING HERE!

  1. Yellow divs are float:right
  2. Green divs are float:left
  3. Divs labeled clear-R are clear:right
  4. Divs labeled clear-L are clear:left
  5. Click on a div to toggle the addition/removal of either the float:right or float:left class
  6. Static divs do not have a background color
  7. Click on 1R and then click on 6L for an interesting result
1R
2R
clear-R
3R
4L
5L
6L
7L
clear-L
8L
clear-L
9L
clear-L
10
11R
12R
13R
clear-R

Code

HTML 
    <section>
        <div id="div-one" class="right float-example">1R</div>
        <div id="div-two" class="right clear-right float-example">
            2R <br>clear-R
        </div>
        <div id="div-three" class="right float-example">3R</div>
        <div id="div-four" class="left float-example">4L</div>
        <div id="div-five" class="left float-example">5L</div>
        <div id="div-six" class="left  float-example">6L</div>
        <div id="div-seven" class="left clear-left float-example">
            7L<br>clear-L
        </div>
        <div id="div-eight" class="left clear-left float-example">
            8L <br>clear-L
        </div>
        <div id="div-nine" class="left clear-left float-example">
            9L<br>clear-L
        </div>
        <div id="div-ten" class="left float-example">10</div>
        <div id="div-eleven" class="right float-example">11R</div>
        <div id="div-twelve" class="right float-example">12R</div>
        <div id="div-thirteen" class="right clear-right float-example">
            13R <br>clear-R
        </div>
    </section>
CSS 
    div.float-example {
        width: 5em;
        height: 10vh;
        border: 2px solid red;
        margin: 0 .4em;
        text-align: center;
    }

    div.right {
        float: right;
        background-color: lightgoldenrodyellow;
    }

    div.left {
        float: left;
        background-color: lightseagreen;
    }

    p.first {
        font-family: cursive;
    }

    p.second {
        font-family: 'Times New Roman', Times, serif;
    }

    p {
        font-size: 1.2em;
    }

    p.third {
        font-family: Arial, Helvetica, sans-serif;
        color: purple;
    }

    .clear-right {
        clear: right;
    }

    .clear-left {
        clear: left;
    }

    .clear-both {
        clear: both;
    }
JavaScript 
    function toggleClass(id, toggleClass, toggleMsg) {
        if (document.getElementById(id)) {
            document.getElementById(id).addEventListener('click', function () {
                if (this.classList.contains(toggleClass)) {
                    this.classList.remove(toggleClass);
                    this.innerHTML += "<br>" + "Static";

                } else {
                    this.classList.add(toggleClass);
                    this.innerHTML = toggleMsg;
                }
            });
        }
    }

    toggleClass('div-one', 'right', "1R");
    toggleClass('div-two', 'right', "2R" + "<br>" + "clear-R");
    toggleClass('div-three', 'right', "3R");
    toggleClass('div-four', 'left', "4L");
    toggleClass('div-five', 'left', "5L");
    toggleClass('div-six', 'left', "6L");
    toggleClass('div-seven', 'left', '7L' + "<br>" + "clear-L");
    toggleClass('div-eight', 'left', '8L' + "<br>" + "clear-L");
    toggleClass('div-nine', 'left', '9L' + "<br>" + "clear-L");
    toggleClass('div-ten', 'left', "10L");
    toggleClass('div-eleven', 'right', "11R");
    toggleClass('div-twelve', 'right', "12R");
    toggleClass('div-thirteen', 'right', "13R" + "<br>" + "clear-R"); </pre>

References

MDN: float