Float and Clear

Quick reference

• 00:05 In this video, I wanna talk about floats and clears.
• 00:07 So come back to our index page,
• 00:09 you see I've created these two divs and I've called one left and one right.
• 00:13 Just put the word left and right in there.
• 00:15 And if you see right now, it just says, left and right,
• 00:17 right on top of each other.
• 00:19 So if we come back here to our style sheet, now let's write the CSS for this.
• 00:23 So for classes, we're starting with a period.
• 00:25 So start left and I'm just gonna say,
• 00:29 float left and come down here and
• 00:33 do the same thing for right, float right.
• 00:39 And if we save this, come back.
• 00:42 This one goes left and this one goes right.
• 00:44 So that's float and
• 00:45 that's going to be very useful to you,but if we come back here.
• 00:48 And so we're underneath the right float.
• 00:52 If I just type in some text say, test, you can see, boom,
• 00:55 it shows up right next to this.
• 00:56 And that's because when you do floats like this, you need to clear them as well.
• 01:01 So let's come back to our HTML and let's create another div and
• 01:07 let's call this clear-left, and the name doesn't really matter.
• 01:14 So here if we go test and save this, if we come back here, nothing will have changed.
• 01:19 We need to write the CSS for this.
• 01:20 So let's come back here and just kinda copy this.
• 01:23 Make it a little quicker, come down here and
• 01:27 go .clear left and then give this a clear left.
• 01:32 We save this, come back here and hit reload.
• 01:34 Now, this pops down.
• 01:35 So that's a good way to clear things.
• 01:38 So that's float left and right.
• 01:39 You can do this with divs.
• 01:41 Another useful thing to use is for with images.
• 01:44 A lot of times, you'll have an image and you'll wanna have text next to it.
• 01:48 So let's come back here and let's use my hike image again.
• 01:52 Actually, let's just erase all these stuff and start over.
• 01:55 So img src= hike.png and
• 01:59 let's give this a height of 150.
• 02:05 And then right next to this, let's go this is some text and
• 02:10 let's go ahead and get rid of that.
• 02:12 So if we save this and come back and hit reload, we see the picture and
• 02:16 then this is some text.
• 02:18 Well, this is on the right as you would expect here.
• 02:21 But let's say, we want this text to be on the left-hand side.
• 02:25 Well, we could do this a couple of different ways.
• 02:26 We can come back to our style sheet and
• 02:29 we could change the image, CSS and we can say, float.
• 02:34 Give this a float right.
• 02:35 Now if we save this, come back here and hit reload.
• 02:37 Boom, now this goes over and the text goes on the left.
• 02:41 With any sort of CSS, we could give this different margins,
• 02:45 different paddings, a height, a width to move this stuff around and
• 02:50 positions this exactly how we want.
• 02:53 So that's one way to do it.
• 02:53 You could do just change the img.
• 02:56 But when you do it this way, all of your images are gonna float right and
• 02:59 that might just not be what you're looking for.
• 03:01 Instead, you can come to your image and just give it a class="right".
• 03:09 Save this, hit reload and we get the same thing.
• 03:12 Change it to class equals left.
• 03:15 Save this and we get this.
• 03:17 Couple of different ways to do this.
• 03:18 Float left and right very useful.
• 03:20 Remember, you have to clear them and that’s all for this video.

Lesson notes are only available for subscribers.