Original subtitles

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 it's 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 know 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,

there 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 or 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 overwrite 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 selected like this,

and then here we can use the clear property.

And so in clear we can use also left, right,

and both.

Now, if we only wanted to clear the left floats,

then here, we can say clear left

and to 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.

Correct.

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 a 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 kinds of empty divs,

just like I explained to you before.

So that's not good.

And therefore someone came up

with 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 less 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 a 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 a 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 to 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've 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,

it was being used all the time

and we called this the clearfix hack.

All 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 floats.

And so let's check it out now.