By now you know that floating an element takes the element

out of the normal document flow.

When you float elements left or right in a container, the parent container's height

collapses because it no longer honors the space of the floated elements inside it.

Now, you may not notice any problem at all if the parent container doesn't have

a background color, image, or border.

In this lesson you'll learn why it's always important to be aware of

collapsing containers when using floats.

In our layout the collapsed parent container is the header.

It has a background color so we're able to see that the browser does not account for

the height of the floated name element and the navigation.

A parent container with floated elements may not always collapse to no

height at all.

If the container includes a padding value or

a height value, it will have some visible height.

So for example the header in our layout isn't collapsing entirely because

of the 1.5 em top and bottom padding values applied to main-header,

so it still honors those padding values.

But if the header had no padding whatsoever,

the headers height collapses to 0 height.

I want to open up the collapsed space around the floated header elements.

Now I could force the header's height to expand by giving it a fixed height.

So for instance, in the main-header rule, I can say height: 110px.

And when we take a look at it again,

we can see that the background color shows up again.

Now, this may be good enough to help you in a pinch or you can use this on small

projects with really simple header layouts like this one.

However, applying a fixed height to a container isn't a flexible solution,

especially when you're dealing with the elements that have bearing heights,

like columns which you will learn more about later.

So I'll go back and remove the height value from the main-header rule.

So there a few simple and more flexible ways to force a collapsed element

to expand to the full height of its floated child elements.

One way is setting the parent element's overflow value to hidden, or auto.

The next way is clearing the floats with a CSS pseudo element.

So if I go back to the main header rule and add a overflow property and

set the value to either auto or hidden, I'll use the value hidden.

We can see how it fixes the collapsing issue by forcing the header to expand and

contain the floated elements.

This will do the trick, and depending on your layout it may be all you need to do.

But the overflow property isn't specifically for floats.

The value hidden can hide content that shouldn't be hidden, and

the value auto can trigger unwanted scroll bars.

So for example, you may have a drop down menu in one of the navigation items, and

if the drop down has content that expands below the header,

that content will not show up and appear to be cut off.

So the most popular and most ideal method web designers and

developers use for containing floats is called a clearfix.

This clever method uses a CSS pseudo element

to force a container to clear its floated children so

that it doesn't collapse, no matter how many float it contains.

Back in my stylesheet, I'm going to scroll down to the media query and

inside the media query all the way at the bottom,

I'm going to create a new rule with the class clearfix.

And I'll append an after pseudo element to this selector.

So after the clearfix class, I'll type two colons, followed by after.

You can use any class name you want as the clearfix.

Group, clear or

cf are also common class names web designers use when writing clearfixes.

And the double colon in the selector means that this is a pseudo element.

And you can learn a whole lot more about pseudo elements

by checking out the links in the teacher's notes of this video.

Inside this rule I'm going to type the content property and

set the value to an empty set of quotes.

Now the clearfix rule uses the content property

to generate a blank pseudo element after an element from within the CSS.

The pseudo element appears in the page as would a real HTML element.

In other words, it creates an empty virtual element

at the bottom of the parent container.

Below the content declaration I'm going to type display: table.

Now the display property uses the value table

to display the pseudo element as a block level table.

This mimics the HTML table layout model but with CSS.

Now the table display mode isn't as commonly used by developers

as the in-line, and in-line block modes you learned about in the previous section.

And you could also read more about this display value

in the teacher's notes of this video.

Now the most important part of this clearfix is the clear both declaration.

The clear property is directly related to floats.

And it's important for controlling the behavior of floats.

The value both clears any collapsed space

created by floats on both side of the container.

Now if you're not familiar with some of these CSS properties and

values, don't worry.

All you really need to know is one key concept.

When you apply this clearfix to a non-floating element, like the generated

afterpseudo element, it moves the element below all floated elements.

This movement prevents the container's height from collapsing.

So now whenever you need to clear the floats in a container

you simply add the clearfix class to the element.

To fix the collapsed header, I'll simply open up the index.html file and

scroll down to the container inside main-header, and add the class clearfix.

Once I save my index file and

refresh the page we can see that the header is no longer collapsed.

It now expands to the full height of the floated name and main nav elements.