22-Mar-2022

Html & Css For Beginners Part 18: How Floats And Clears Work

Hey, guys, welcome back to my series on HTML and CSS for beginners. My name is Kevin. And today, we're looking at floats and clears, I'm, not going to lie to you, it's really weird, but really important to know if you want to make a layout, you need to get how this works all right. So in this video we're, not really going to see how to build a layout I, just want you to understand how floats and clears work I, find it hard because I don't really have a real world example to like to make a good metaphor with I've.

Tried a lot of times I've looked at what other people explain it and there 's's, no good metaphor for it in the real world. So it's hard to anchor it with an idea of how other things work I'm going to start with, oh, well, let's just start looking at my document it's a little strange compared to before, but it's really going to help us out with what we're doing floating. An image is always the first thing you learn how to do so we're gonna look at that. First, just to sort of get an idea of what floats do.

So if you see here, I have an image, and after my image, I have a paragraph, and what I can do is I could come into here and just say, all of my images and I wouldn't. Normally do all of my images like this I would give it a class. But all of my images are going to do something called float left, and we'll explore what other options we have for float in a second, but I, just want you to see what it does. And my text is wrapping around my picture now so let's just undo that save undo undo undo. Undo ha, and. Save my text is there.

And when we do our float left blow to left my text wraps up around there, so that's kind of cool, and it's, definitely something you'll probably want to do at one point or another where you won't want just one a picture you'll want your text next to it like that what I'd probably add with this is a little margin on the left, not the left, the right say, 20 pixels, just so my text isn't, actually touching my picture. So that's, pretty cool. Now you have two real options with floats. You.

Can float to the left, and when I floated left, it didn't actually move my picture, but it let the text come up next to my picture. The other option I have is to float to the right. And that will put my picture all the way on the right side.

Doesn't matter on my page. So let's say, I make the screen bigger it's, always just it's floating to the left it's going all the way over to the left side. So my text can come and wrap around it, and it will sit on the right instead of sitting on the left, if I were to. Do this I'd want to switch my margin to the other side, just to put the space here and everything is hunky-dory that's kind of cool. If you look at your floats, the only other option is none, which is the default and that sets it back to what it was. Sadly, there's, no float center, which everybody always will ask me about there's, no float center option, it's, either all the way to the left or all the way to the right. So let's just do our float left again.

So we have that now to explain a little of. What's going on I've set up these two boxes down here. And this box as you can see has a transparent background on it. So you can see the background popping through just a little. And this is kind of important. So this is my red box that I have here in my CSS. And then my blue box is the one underneath it.

Normally I wouldn't have a red box in blue box like this. But for demo purposes, it's a great example. So what I'm going to do is I'm going to come down in here, and I'm going to tell my red box to. Float to the left, and what people usually assume is going to happen as my blue box will move up around just like the text did, so my text went and wrapped around. So it would make sense if this blue box came up over here, let's save that hit refresh and well, that's. Not quite what happened.

My blue box moves up underneath the red box, and then I have my text here that's sort of wrapping around there now in that empty space. So what happens when I'm floating is a picture it's actually floating up in the. Air it's a cloud.

Now it moves all the way up into the sky it's moving up higher and other things can go underneath it. But you'll, notice my text isn't going underneath here. But what if my paragraph let's just come to here and give my paragraph a background color of yellow, and you can see this just turned orange because what's actually happening is this paragraph, which is a big block is moving underneath here. Just like this blue box has moved underneath it. But the text that's inside my paragraph. Which is this big yellow box is wrapping around and text won't go underneath floating items. This item has a margin of zero on it.

And that you know, figure the way the margin on that's working is its a margin of zero. So if this was a bigger margin let's, do a margin right of fifty pixels, and it's going to push the text 50 pixels away, even though the box that it's inside is still underneath it. And if I did a margin of negative, fifty pixels, then my text can actually go underneath it. So that margin of. Zero is sort of creating like this space here like it's, right on it, but it's stopping text from going underneath there, but my box itself can go. Underneath remember, I said, this is kind of strange.

Now you probably understand what I'm talking about it's going to get even stranger. Now, the sort of the brother and sister of this whole things we have two floats its brother. And then we have the sister that's the clear they always work together floats and clears or two properties that work with one. Another so float brings things up in the air and that's other things go underneath it, other than text, and then the clear so let's find my paragraph here, and I can come and say, clear, both, oh that's, just yeah, I'm going to put both because clear both is what you use pretty much all the time. Oops, I forgot my semicolon at the end there. And there we go what they clear both.

It do you'll. Notice. Now this isn't going up on the slide here anymore. And this paragraph down here is not going underneath it's. Starting right after that item, so if I have clouds floating up in the sky and other things we're going underneath them picture the clear this is gonna really kill my cloud analogy. Yeah, what else can float not a lot of things float that stick with the cloud anyway, there's, no real analogy for this and that's. Why?

The whole thing falls apart. But what the clear does is this sort of sets up this big wall here. So it's clearing the floating items. So instead of going underneath the floating items, it. Starts everything fresh again.

So this paragraph here, instead of going next to that it's going to come underneath just like as if this wasn't floating. And here, too it's, it's, pretty the clear makes it go. You know, if anything above it is floating its, just going to pretend it isn't floating, and it's going to start underneath like it. Normally would, but where that gets interesting here, it's kind of useless.

But where it's fascinating is here where this one is paying attention to the float. But this one isn't. You're probably thoroughly confused right now, honestly, I don't, blame. You let's get to a little more of a realistic example, and I'll keep these two boxes. But let's just take off there. Let's do a couple of things here.

I'm going to grab this. Paragraph cut I'm going to put it inside my red box and let's. Take you this second paragraph here and let's drop that into my blue box. Oops, I made a little mistake.

There I'm going to save that. And the only other thing I'm going to do I'm going to give these both the same. Width of 500 pixels and I'm going to take off their heights, because they don't need them anymore, oops save that and refresh and let's, get rid of that. Yellow background on our paragraphs.

Paragraph background color, yellow gone and let's get really clear - we don't need that and let's get rid of my float and refresh okay. So we're back to normal blue box. Let's also make our text color, white and refresh, so I have one box here and one box here. And what if I want these two boxes to be next to one another. What I need to do is I'm going to take my red box, and I'm left, and then I'm going to take my blue box and do a float right I'm going to save this and refresh. And oh, no. My page isn't, big enough.

There we go. They have room. They go next to each other. So this is floating to the left. This is floating to the right.

They can go next to one another. The problem is, if this gets smaller that drops down and goes underneath because there's not enough room. So to really show you what's happening with floats in. Clears, I've created this other page here, where I have ten boxes going down the screen and what I'm going to look at is I'm gonna start off just by floating this first box. Now, what's really important here is all of them have the same width and height. So you can see they're all the same size.

So if I come here, and I just take box one, and it goes in order that's something that a little bigger. So I get box one down into box nine down there. And so if I take box one, and I float this one to the left. Actually I'm gonna start by floating it to the right. So we can see what happened. So when I float that to the right this, and when I refresh my page, this pink box is going to shoot over to the right side and everything else will move up that's, sort of what you'd expect at this point I'm floating it.

So it can move over, and other things can come there, instead of being stacking one on top of each other, but if I float it to the left, oops, what left so just like in that last section we were looking at on. The other page, the content below would go underneath that if I change my pink here, let's just make it. Our GBA I'm going to make it a bit transparent, just make it black zero zero zero to five. So we can see that red box is underneath it change it back to pink. So my red box is underneath. But now if I take this box too, which is my red box and I float this one float the left.

What do you think is going to happen? Let's hit refresh and find out my red box moves up to here. And we also lost that dark red. One. Firebrick you a darker red that darker red went underneath this pink box, we can't see it anymore. So if I float my firebrick float left that one's going to jump up to over here now and the other ones move under here so what's happening when we're using our floats is it's changing how the element is working before that these are block level elements. So they're taking up all the space on my screen here, even though they're just sort of stacking, we said, they're like Legos, they like clicking together and.

Stacking one on top of each other when I float it, completely changes, how they work it's, allowing other elements to go under them, they're floating up in the air and my column here can shimmy up underneath, but they start working together instead of going underneath each other and all that they've all floated up to the same level, and they can work together. But now instead of going one underneath it, they have space to go one next to each other. This is kind of weird. So what I'm going to do is I'll take.

My floats off here. So we don't have to do them all one by one, and I'm, just going to say all my boxes have a float left hit refresh. And there we go I get a nice big line like that and what's really important here is if I change the size of my browser, you can see that when I get to here what's happening is the boxes are falling underneath, so they're staying in the same order. But when they run out of room, they start stacking, you know, they don't have room here, they're, not going to stay there. They're. Gonna slip down to the next line and start going across like that, which is significant and that's. Why when I was looking at this one, when I ran out of room that blue box would fall and come down here instead.

So it didn't have enough room it's floating, right so it's staying on the right side. But these two they're interacting with each other. They can't fit next to each other. So they go one on top of each other again.

So the same thing is happening here where they're falling down one after each other. And another thing we can do is we can do a float right. So if I take a float right, and I save that let's hit a refresh.

So all of them are going to float right instead, and they go in a reverse order. And this is really weird what's happening is box. One is the first one, so box one is floating up all the way to the right and then box two is going up to the right. It can't. Go past box. One box one is already here. So it doesn't push box one out of the way it just snuggles up next to it.

And then the third. One and the fourth one, and they all line up one after each other. So you have to be very careful with float right.

It. Can if you have more than one thing floating to the right? It will reverse the order of them. So that's, really important to remember in general, most things I do float left. And occasionally, we float the last element or something to the right just to make sure that it's lighting up properly.

But float left is something we use a little more often. So what I'm going to do now is I'm. Going to come on my yellow box here, which I think is box. Five, yeah.

And I'm going to put a clear on this one, so I'm going to say, clear:both, I'm going to save that, and I'm going to come here and push refresh. And you can see that it's, no longer going next to this orange one it's coming and falling onto its own line. So box five is really, you know, this clear is really important it's.

The clear always forces a new line, it's saying, ignore the things that are floating above it. And instead come and start down here. The reason I'm putting clear both is the only options we have are clear both clear left or clear, right if something is set to clear right, let's, save that refresh it's like nothing ever happened up here, it's only paying attention to things that are floating to the right if nothing's floating to the right it's. As if this clear is not there. And if I did a float left because everything up here is floating to the left it pays attention to all of them. So this is also significant to know in general.

Clear:Both is what you want to use like 99% of the time. So pretty much every time you are clear, it will be a clear both it makes it a little easier to remember just use clear both you might be a little unsure right now. And when you actually want to be using clears and that's, fine it's, a little abstract it's, really strange right now in just a few videos, though we're going to get around to actually making some layouts. And when that happens, this is all going to make a lot more sense, just on how it. Works and why we want to do it.

So keep all of this in mind play around with it a little see if you can't get a better understanding of what's really going on, if you have any questions about it, do please leave them down in the comments below I'll, do my best to help out. And if you'd like the video, please hit the like, and I'll see you in the next video thanks for watching.