2.3 Floating and Clearing​

Hi, welcome back to The Complete Guide to CSS Positioning. In this lesson you're going to learn how to use floating and clearing. And this is probably the most popular technique for creating common layouts in CSS. Right, so we just have to do a couple more steps to get ready to use the floating and clearing techniques. We're gonna change the width here to 50% because we're gonna have a left column and a right column and we need to make sure that those two columns are both going to fit together inside this parent wrapper. So we're going to set the width here to 50 and then type in % and just hit Enter, and it will automatically change the unit from pixels to %. Then select the parent, add another div block. And we will give this the class child_02 and we will set that to 50% width. And we'll give it a background color, just helps to make everything easier to see. And then we want one more div, And we'll give this one the class child_03, and then the same steps again would give it a background color orange. And we will set it to 50% width, and then we also need to get rid of the centering that's applied here. So just click this order on the left here and then hit Remove this Style. Right, now for floating and clearing using web flow you have these buttons here. So you have the option to set no float or to float left or float right. And then down here you can either have no clear, or you can clear left, clear right, or clear both. Now if you don't know what those mean yet, don't worry because we're gonna go through and show you practical examples of each one. Now what floating basically does is it pulls an object out of the normal document flow and it will position it off to the left or the right side. And it will float there, and all the other content will either flow around it, or it might just sort of disappear behind it, if you don't know how to clear correctly. I'll show you an example. First, select this first child item here, and then we're gonna float it to the left. If you notice then it made that look like our second child disappeared. We can see the third child but it almost looks like the second child has just disappeared completely. What's happened is that because we've pulled this element out of the document flow, the second child element has now moved into the same position that the first child element just was. And we'll click this button up here, the Navigator, which gives you a look at all of the elements that are in your document. And then we're gonna click the second child. And this is just to show you that the element is still there, and we're gonna increase its height, let's say we'll set it to 500. So there, see, the element is still there but it's just now behind that floated element, right. So let's just get rid of that fixed height again. And the way to make an element still appear after a floated element is to use clearing. Now let me show you what I mean. Now we know that our first child element was floated to the left, so to make our second child element show up again, we're going to clear it to the left. So hit this button here. All right, so there it is, it's shown up again. And what that has effectively done is draw a line across here, basically under the bottom of that first floated element. So we could change the height of our first element, And the second element is still gonna get pushed underneath. Right, so just remove that height again, just delete it and hit Enter. Now another way I can make sure that this second element is still visible is rather than just clearing, I can also float it to the left as well. And let's look and see what happens. So we get rid of that clear and this time we'll float it to the left. All right, so now what's happened is we've got both the first and the second child elements floating to the left. So both of them are stacking up against each other as far left as they can go. The second one can only go up against the first one, so that's why it's positioned itself over on the right-hand side. It just can't go any further over to the left. But now you'll notice that the third element is invisible. So you fix that just like we did before. Go into the Navigator, select the third child and now we'll clear left. So now our third child is showing up, too. And now if we change its width to 100%, now you've got a very common layer that you'll find often throughout web design which is two columns and then a footer along the bottom. And now so far we've cleared both of these to the left. So we've got the first child element is pushing itself as far left as it can go and so is the second child element. But we can, instead of having the second child element float left, we can have it float right. Now let's try that now. Now this seems like nothing has changed. We've now got this element is trying to push itself over to the right. So it goes right up against this boundary here. And this one is pushing itself over to the left. And it looks like everything's still all good. However, our bottom element here is only clearing to the left. So it's only looking for the bottom of this element here. So if we change the height of our first element to, let's say 200, that pushes what would basically be our footer element that pushes it down,. However, right now if we change the height of this element, so let's change this one to 400, it doesn't push our third element down at all. Now this is just going straight over the top. Now the way that we solve that is by changing this so it doesn't only clear to the left. We want it to clear both. So now it's looking for anything that has cleared right as well as anything that has cleared left. And it will just position itself below whichever of the two is highest. Now I'm just gonna show you one more cool thing that you can do with floating. And right now, this has float left applied to it, FS child, and this has float right applied to it. If we have a look at our code, now you know HTML, the div for child one comes before the div for child two. Now if you wanted to swap the position of these, one way would be to move this div above the child one div. However, you don't have to do that, you can do it in CSS instead. Now if I select child two and I float it to the left, and I select child one and I float it to the right, you can see we've swapped the columns. Now this can be really handy for search engine optimization purposes. So for example, let's say you wanna have a sidebar on the left and you wanna have your main content on the right. If you're positioning them only using HTML, that would mean your sidebar content would have to come first in your HTML before your main content. But typically what you wanna do is put the most important content up higher in your markup. So that bots can come to it sooner when scanning through the code. So by using floats like this, you can visually position a sidebar on the left side of the page. But you can still have your main content coming up first in your markup. All right, so that cause all the essentials of floating and clearing. Now it hasn't taken us long to go through these fundamentals, but if you take those fundamentals and become familiar with them, that will open up a world of layout opportunities. As I mentioned, this is probably the most common technique for creating layouts in CSS. In the next lesson, we're going to move into digging into the specifics of CSS positioning and we're gonna start with position relative. I'll see you there.