To follow along using the latest workspace, 0:00 launch the workspace on this page. 0:02 One of the easiest ways to use floats is with an image. 0:05 Text will wrap around an image with a float property applied to it. 0:08 Like in a magazine layout. 0:12 So when I preview my latest workspace, you can see that, 0:14 currently, the image is on its own line above the paragraphs. 0:17 Now, I want this text below the image to float next to and 0:22 around the image element. 0:27 To float an element right or left, you use the float property, 0:29 which accepts three values, left, right, or none. 0:33 Back in my work space, I'll open up the style.css file, and 0:37 scroll all the way down to the media query. 0:42 So in the featured image rule here, 0:45 I'm going to add a float property and set the value to right. 0:48 So when I float the image right, 0:54 notice how the image is no longer on its own line. 0:58 It's pushed to the right edge of its container. 1:01 And the text in the adjacent paragraphs flow down its left side, 1:04 taking up all the remaining space in this line. 1:09 If I go back in my css and change the float value from right 1:12 to left, now the image gets pushed to the left 1:19 edge of its container and text flows down its right side. 1:23 And if I resized the browser window and make it narrower, 1:28 notice how the text refloats itself around the image. 1:31 If you're ever curious about how your floated layout actually works, apply 1:39 a dark border or background to the element to see what's going on behind the scenes. 1:43 I wanna apply the border to my paragraph elements. 1:47 So I'll go back to my style sheet and create a new rule that targets the P 1:51 element, and then I'll give it a solid one pixel red border. 1:55 So when I go back and preview the layout in the browser, 2:02 notice how the image is actually inside of the paragraphs box. 2:07 This is an example of how a floated element is taken 2:11 out of the normal document flow. 2:14 When you float an element, like this image here, it's technically a block level 2:16 element, because it accepts any width, height, padding, or margin values. 2:21 But it behaves like an inline element, because it doesn't exist on a line of it's 2:25 own, and surrounding content flows around the floated elements. 2:30 Now, I wanna add some white space between the text and the image, so 2:36 the text isn't touching the image. 2:41 Now, applying a margin to the paragraphs will not create the desired white space. 2:43 For example, if I go back to the P rule and 2:49 apply a 50 pixel left margin to the paragraphs. 2:52 When I refresh the page, the image is out of the normal document flow. 2:56 So the margin creates separation only between the text and 3:00 the left side of its container. 3:04 And you can see that happening right here. 3:06 So, I'll go back to my style sheet and remove the left margin. 3:09 So to create space around the image, so 3:14 that there's separation between the text and the image. 3:16 I'll need to apply margins to the image. 3:20 Back in my featured image rule, I'll add a margin top property and 3:24 set the value to five pixels. 3:29 Below that, I'll add a margin right property and 3:32 I'll set the value to 25 pixels. 3:36 Then I'll add a margin bottom property and set the value to 25 pixels. 3:39 Then I'll go ahead and remove the red border applied to the paragraphs. 3:45 I'll save my style sheet and refresh the page. 3:49 And now we're able to see that nice separation between the image and the text. 3:52 So we have a five pixel margin on the top, 3:58 a 25 pixel margin on the right side and 25 pixel margin on the bottom, 4:01 which we'll be able to see when we resize the browser window. 4:05 Nice. 4:14 And I can also create a little more separation by applying a border and 4:16 padding to the image. 4:19 So for instance, I'll go back to my style sheet. 4:20 And inside the feature image rule I'll add a padding property and 4:23 set the value to 10 pixels, and give it a solid 1 4:30 pixel light gray border with the hex value d9e4ea. 4:35 Once I go back and refresh the page, we can see the ten pixels 4:41 of padding on each side between the border and the image. 4:44 You'll see this effect used a lot in web design. 4:49 Images are one of the many uses for the float property. 4:52 You can also build a horizontal navigation or multi-column layouts with floats. 4:55 You'll learn more about those starting in the next video. 5:00