HTML : 

```
<img src="http://2.bp.blogspot.com/-lUl0ztniLKk/Vhhjg7WWPJI/AAAAAAAAAJI/PgYEmoSNKRU/s400/Author.gif" alt="Author photo">
<p class="author-text">Jackson Gonzalez</p>

```

CSS:

```
 img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    float: left;
}
.author-text {
    font-size: 22px;
    float: left;
}

```

If i have float left, the order makes sense to me.. because first the image then the text. But when I change float from left to right.. first the text shows up then the image?.. why does the order change?... 

Left: <https://codepen.io/psj01/pen/YrgKLy>
Right: <https://codepen.io/psj01/pen/KXEPoQ>