To follow along using the latest workspace,

launch the workspace on this page.

One of the easiest ways to use floats is with an image.

Text will wrap around an image with a float property applied to it.

Like in a magazine layout.

So when I preview my latest workspace, you can see that,

currently, the image is on its own line above the paragraphs.

Now, I want this text below the image to float next to and

around the image element.

To float an element right or left, you use the float property,

which accepts three values, left, right, or none.

Back in my work space, I'll open up the style.css file, and

scroll all the way down to the media query.

So in the featured image rule here,

I'm going to add a float property and set the value to right.

So when I float the image right,

notice how the image is no longer on its own line.

It's pushed to the right edge of its container.

And the text in the adjacent paragraphs flow down its left side,

taking up all the remaining space in this line.

If I go back in my css and change the float value from right

to left, now the image gets pushed to the left

edge of its container and text flows down its right side.

And if I resized the browser window and make it narrower,

notice how the text refloats itself around the image.

If you're ever curious about how your floated layout actually works, apply

a dark border or background to the element to see what's going on behind the scenes.

I wanna apply the border to my paragraph elements.

So I'll go back to my style sheet and create a new rule that targets the P

element, and then I'll give it a solid one pixel red border.

So when I go back and preview the layout in the browser,

notice how the image is actually inside of the paragraphs box.

This is an example of how a floated element is taken

out of the normal document flow.

When you float an element, like this image here, it's technically a block level

element, because it accepts any width, height, padding, or margin values.

But it behaves like an inline element, because it doesn't exist on a line of it's

own, and surrounding content flows around the floated elements.

Now, I wanna add some white space between the text and the image, so

the text isn't touching the image.

Now, applying a margin to the paragraphs will not create the desired white space.

For example, if I go back to the P rule and

apply a 50 pixel left margin to the paragraphs.

When I refresh the page, the image is out of the normal document flow.

So the margin creates separation only between the text and

the left side of its container.

And you can see that happening right here.

So, I'll go back to my style sheet and remove the left margin.

So to create space around the image, so

that there's separation between the text and the image.

I'll need to apply margins to the image.

Back in my featured image rule, I'll add a margin top property and

set the value to five pixels.

Below that, I'll add a margin right property and

I'll set the value to 25 pixels.

Then I'll add a margin bottom property and set the value to 25 pixels.

Then I'll go ahead and remove the red border applied to the paragraphs.

I'll save my style sheet and refresh the page.

And now we're able to see that nice separation between the image and the text.

So we have a five pixel margin on the top,

a 25 pixel margin on the right side and 25 pixel margin on the bottom,

which we'll be able to see when we resize the browser window.

Nice.

And I can also create a little more separation by applying a border and

padding to the image.

So for instance, I'll go back to my style sheet.

And inside the feature image rule I'll add a padding property and

set the value to 10 pixels, and give it a solid 1

pixel light gray border with the hex value d9e4ea.

Once I go back and refresh the page, we can see the ten pixels

of padding on each side between the border and the image.

You'll see this effect used a lot in web design.

Images are one of the many uses for the float property.

You can also build a horizontal navigation or multi-column layouts with floats.

You'll learn more about those starting in the next video.