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 gonna 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 gonna see how to build a layout I just want you to understand how floats and clears work I find it hard because I doesn't really have a real world example to like make a good metaphor with I've tried a lot of times I've looked at what other people explain it and there's there'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 gonna start with oh well let's just start looking at my document it's a little strange compared to before but it's really gonna 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 asks 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 bit 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 bit 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 gonna tell my red box to float to the left and what people usually assume is gonna 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 it's a margin of zero so if this was a bigger margin let's do a margin right of fifty pixels and it's gonna 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 gonna get even stranger now the sort of the the brother and sister of this whole things we have two floats it's 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 gonna 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 does 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 gonna 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 it's just gonna pretend it isn't floating and it's gonna start underneath like it normally would but where that gets interesting here it's kind of useless but where it's interesting 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 bit more of a realistic example and I'll keep these two boxes but let's just take off there let's do a couple things here I'm gonna grab this paragraph cut I'm gonna 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 gonna save that and the only other thing I'm going to do I'm gonna give these both the same width of 500 pixels and I'm gonna 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 gonna 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 gonna 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 gonna 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 gonna 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 gonna 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 gonna 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 gonna 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 important 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 bit 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 gonna put a clear on this one so I'm going to say clear:both I'm gonna save that and I'm gonna 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 important to know in general clear:both is what you want to use like 99% of the time so pretty much every time you is clear it will be a clear both it makes it a little bit 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 gonna 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 bit 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

Channel: Kevin Powell

Views: 97,677

Keywords: HTML, CSS, Tutorial, How to, floats, clears, HTML & CSS for beginners, float: left, float: right, clear: both, floats and clears, how floats work, css float, css clear, css float and clear, how css floats work

Id: LrdkRMZhgZg

Length: 15min 50sec (950 seconds)

Published: Wed Nov 09 2016