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
1
2
clear-R
3
4
5
6
7
clear-L
8
clear-L
9
clear-L
10
11
12
13
clear-R

Code

HTML

<section>
    <div class="right float-example">1</div>
    <div class="right clear-right float-example">
            2<br>clear-R
    </div>
    <div class="right float-example">3</div>

    <div class="left float-example">4</div>
    <div class="left float-example">5</div>
    <div class="left float-example">6</div>
    <div class="left clear-left float-example">
            7 <br>clear-L
    </div>
    <div class="left clear-left float-example">
            8 <br>clear-L
    </div>
    <div class="left clear-left float-example">
            9 <br>clear-L
    </div>
    <div class="left float-example">10</div>

    <div class="right float-example">11</div>
    <div class="right float-example">12</div>
    <div class="right clear-right float-example">
            13 <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;
    /* padding-right: 1em; */
    /* margin: 2em; */
}

p.first {
    font-family: cursive;
}

p.second {
    font-family: 'Times New Roman', Times, serif;
    /* padding-right: 1em; */
    /* margin: 3em; */
}

p {
    /* padding: 0 1em; */
    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;
}

Notes

Mnemonic

References

MDN: float