Floated Elements

There is an img element at the beginning of this paragraph of text. Because img tags are inline elements by default, it is making the first line of the paragraph very tall. However, css provides a way to make text flow around the image. We do this with the float property.

The float property is applied to the element around which we want text to wrap. It may seem a bit counter-intutive, but in your HTML code, the floated element must come before the text that wraps around it, just like this document. We can float: left; or float: right;, but sadly, we cannot float: center;

We can use margin on the floated element to control white-space around it, "pushing away" the text that gets too close.

1. Create a stylesheet and link it to this document.
2. Select the portrait class, and add the rule float: left;
3. Set a margin value for the portrait such that it has 2rem breathing-room to the right and bottom, but 0 top and left.

Let's duplicate the img tag above, and place a copy of it at the beginning of this paragraph.

1. Copy the img tag as indicated. No need to style — it will pick up the same styles as the first img because it has the same class applied.

See how the Instructions block also floated around the image? Floating an element doesn't only make text wrap... it makes everything the follows the element wrap, until the element is no longer in the way. But what if we don't want that? What if we want to make sure the instructions always 'get past' the floated item, no matter what?

1. Make a selector for .instructions, and add the rule clear: both;

We use the clear property to tell a subsequent element to 'clear' floated items. You can clear: left; to clear any elements that are floated left, clear: right; to clear any elements that are floated right, or clear: both; to clear all floated items regardless of the side they're on.