Instructor: So, in this lecture,
we will quickly learn how to clear floats.
So, in the last lecture, we created the problem
that this red main header element here collapsed its height
which, remember, was because all of its
child elements are right now floated.
Okay? And so in order to fix that we need to now clear
those floats and the easiest way of doing that,
which is not the best way, but it is the easiest one,
is to simply add another element here to the header
and then clear the floats from there.
So let's add a div here with the class of clear.
And the name here doesn't really matter.
Okay. And this element, let's keep it empty
because we do not want any content in here, right?
So, if we give it a save, then nothing changed for now
which, again, is because now these two elements are floated
and this one here is empty and so it
also doesn't have any effect.
If we added some content here,
then you see that it improved the situation a little bit.
But, of course, this is not what we want.
So, to visualize this, let's actually permanently
give the main-header some other color.
And the way I do that is by simply declaring
another one here afterwards.
So, the original one was this one, and then I can just
write another one later and so this one will
override the first one.
So, this way later I can simply delete this entire line.
Okay. But anyway, what I want to do now is to,
of course, select that element that we just created here.
So, this one with the clear class.
So, select it like this and then here we can use
the clear property and so on clear we can use also left
right, and both.
Now, if we only want it to clear the left floats
then here we can say clear left.
And the same with right.
But in this case, we have a left float and a right float.
And so we want to clear both of them.
And so we use both.
And if we now save this, then our problem is indeed fixed.
Great.
Now, back in the day, we used to build all our layouts
using float properties like this.
So, imagine now that we had a row and
in there we had four columns.
So we needed one element for each of these columns
and we had them floated all side by side.
Then, in that situation, the height of the row,
so of the parent element of the four columns,
would collapse.
And so then we would have to go in and create an empty
div element like that in each of those situations.
So, that could happen like 10 or 20 times on the page.
And so that would not be useful at all, right?
And also we didn't want to clutter up our HTML
with all these empty divs.
So, that's just a bad practice.
So, let's actually remove this here and take a
look at another technique that we can use.
Now, before I'm doing that, just keep again in mind
that building float layouts is kind of outdated.
And so you do not need to understand 100% how all
of this works, especially with the clear.
But, again, I find it important that you have at least
some idea of how this works and especially of this
trick that I'm going to show you now which is called
the "clearfix hack".
So, the clearfix hack is something that has been
widely used for many, many years in the CSS community.
And the reason for that is exactly to avoid having these
kind of empty divs, just like I explained to you before.
So that's not good and therefore someone came
up with the the clearfix hack.
So, the way that it works is that on the element that has
the collapsed height so in this case here on this header,
we add a class which was usually called "clearfix".
So, just like this, okay?
So, we added the clearfix class there and then here in the
CSS we selected that and then we used a pseudo element
and, in particular, the "after" pseudo element.
And remember that what this one does is to basically
create a new element which will be the last
child element of the container.
And so, in a way, doing this is exactly the same
as adding this empty div here manually, right?
Because, again, what this after pseudo element will do is to
insert a brand new element at the very end of the container
which in this case is this header element.
So, this one here, because now we added the clearfix
class to that element as well.
And so now we can clear the floats on this one.
So clear both but now remember two particularities
about the after pseudo element.
So, first of all, it only appears if we define something
for the content property.
Remember that?
So, in content, there needs to be something even
if it's just like empty text and so this is enough.
And then, also by default, pseudo elements like "after"
and "before" are inline elements.
However, clearing floats like this only really works
on a block level element.
And so we set the display property on
this element to "block".
And so with this, the problem should now be fixed as well.
And indeed, there you go.
So, let's check that out quickly.
And so here is that pseudo element that we just created.
And so now the floats are being cleared here.
So, if we were to take this off, then you see
that the heights are back to being collapsed
Okay. And that's it.
So, this is how we would clear floats in float layouts.
So again, by using this "clearfix" class which,
back in the day was being used all the time,
and we call this the "clearfix hack" now, right?
And, so now, next up let's use this knowledge to
build a very simple float layout in order to
make our page look like this.
So like the final demo that I have right here, okay?
So we can easily do that with float.
And so let's check it out now.