Now that we know about the box model, let's talk about positioning elements on a web page, starting with floats!

When an element is floated, it's taken out of the normal flow and placed along the left or right side of its parent.

<html>
<head>
<style>img {float: right;margin: 10px;}</style>
</head>
<body><p><img src="https://getmimo.com/r/profile.svg">I backed my car into a cop car the other day. Well, he just drove off - sometimes life's okay. I ran my mouth off a bit too much, ah what did I say? Well, you just laughed it off and it was all okay. And we'll all float on okay ...</p></body>
</html>
]]>

Nice! In its simplest use, float wraps the text of a paragraph around an image.

We're done with the box model for the moment. Let's look into floats!