DONT ADD ANYTHING HERE!

1
2
3
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi dolor blanditiis, veritatis quisquam eveniet quo! Vero minima, incidunt culpa totam quis eveniet. Nostrum alias exercitationem iste, ab eligendi deleniti fugit facere vel, quo maiores magni nulla dicta fuga error soluta autem unde dolorum ipsa quae. Velit totam earum veniam eveniet!

Notes

  1. Click on any coloured div to toggle the addition/removal of the float-left class
    A div with the float-left class is labelled L
  2. Click on the button to toggle the addition/removal of the clear-left class
    A div with the clear-left class are labelled C
  3. Click on Div 1 for an interesting result
  4. Neither the float-left nor the clear-left class are added to the lorem-ipsum-containing div
  5. Note that the clear-left class is not attached to the red div
  6. The yellow div has opacity: 0.5
  7. (The clear-left class has been added to the subseqent h2 tag)
  8. Relevant classes 
    .float-left {
    float: left
} 

.clear-left {
    clear: left;
}

Code

HTML

<div class="content">
    <div>

        <div id="red_box">
            <span>1</span>
            <span></span>
        </div>

        <div id="yellow_box">
            <span>2</span>
            <span></span>
        </div>

        <div id="green_box">
            <span>3</span>
            <span></span>
        </div>

        <div class="btn">
            <button id="mybtn">
                <span id="toggle">add</span> clear-left class to yellow and green
                divs
            </button>
        </div>

        <div>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi dolor blanditiis,
            veritatis quisquam eveniet quo! Vero minima, incidunt culpa totam quis eveniet. Nostrum
            alias exercitationem iste, ab eligendi deleniti fugit facere vel, quo maiores magni
            nulla
            dicta fuga error soluta autem unde dolorum ipsa quae. Velit totam earum veniam eveniet!
        </div>
</div><!--content--> 
    #red_box,
    #green_box,
    #yellow_box {
        width: 10vw;
        height: 10vw;
        font-size: 2em;
        text-align: center;
    }

    #red_box {
        background-color: red;
    }

    #green_box {
        background-color: green;
    }

    #yellow_box {
        background-color: yellow;
        width: 20vw;
        opacity: 0.5;
    }

    .float-left {
        float: left
    }

    .clear-left {
        clear: left;
    }

    .example {
        clear: left;
    }

JavaScript

    function toggleClass(id, toggleClass, toggleMsgOne, toggleMsgTwo) {
        if (document.getElementById(id)) {
            document.getElementById(id).addEventListener('click', function () {
                if (this.classList.contains(toggleClass)) {
                    this.classList.remove(toggleClass);
                    this.firstElementChild.innerHTML = toggleMsgTwo

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

    toggleClass('red_box', 'float-left', "1L", "1");
    toggleClass('yellow_box', 'float-left', "2L", "2");
    toggleClass('green_box', 'float-left', "3L", "3");

    document.getElementById('mybtn').addEventListener('click', function () {

        if (document.getElementById('toggle').innerHTML == "add") {

            document.getElementById('yellow_box').classList.add('clear-left');
            document.getElementById('yellow_box').lastElementChild.innerText = "C";

            document.getElementById('green_box').classList.add('clear-left');
            document.getElementById('green_box').lastElementChild.innerText = "C";

            this.innerHTML = "remove clear-left class from yellow and green divs";
        } else {
            document.getElementById('yellow_box').classList.remove('clear-left')
            document.getElementById('yellow_box').lastElementChild.innerText = "";

            document.getElementById('green_box').classList.remove('clear-left')
            document.getElementById('green_box').lastElementChild.innerText = "";

            this.innerHTML = "add clear-left class to yellow and green divs";
        }
    })

References

MDN: float