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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam minus veritatis fuga enim accusamus maxime inventore at soluta rerum iure magni, possimus harum omnis, culpa perferendis necessitatibus minima laudantium. Tempora?

1
2
3
4

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas doloribus, ab nesciunt distinctio asperiores pariatur itaque aliquam illum placeat iure tenetur, mollitia error qui ut quisquam repudiandae. Praesentium, nemo nesciunt?

5
6
7
clear-R
8
9
10
clear-L
11
clear-L
12
clear-L

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est ullam excepturi iste tenetur ex labore, fugiat error modi? Sapiente, consequuntur deserunt a quasi mollitia libero quas expedita eius. Facere aut mollitia sapiente quidem quae voluptatum velit hic, harum beatae officia dolores commodi, consequuntur cupiditate, recusandae quam. Culpa illum ipsa similique dolorum. Earum, eaque? Perspiciatis numquam inventore vero quasi totam dolores corrupti quis veritatis est accusantium, consequuntur optio tempore suscipit doloribus corporis repudiandae omnis voluptatum temporibus reprehenderit iste adipisci illum voluptas! Iusto deleniti necessitatibus fuga minima possimus perspiciatis vero laudantium nisi ducimus tempore dignissimos consectetur nam voluptatem, accusamus sed esse?

Code

HTML

<section>
    <p class="first">Lorem ipsum dolor … </p>

    <div class="left float-example">1</div>
    <div class="left float-example">2</div>

    <div class="right float-example">3</div>
    <div class="right float-example">4</div>

    <p class="second">Lorem, ipsum dolor … </p>

    <div class="right float-example">5</div>
    <div class="right float-example">6</div>
    <div class="right clear-right float-example">7</div>
    <div class="right float-example">8</div>

    <div class="left float-example">9</div>
    <div class="left clear-left float-example">10</div>
    <div class="left clear-left float-example">11</div>
    <div class="left clear-left float-example">12</div>

    <p class="third">Lorem ipsum dolor sit, … </p>
</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;
}

References