This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The floats in the header caused a common, undesirable layout behavior you'll likely face when using floats. When you float elements, the parent container no longer honors the space of the floated elements inside it, so its height collapses.
Resources
Video review
- A parent container with floated elements may not always collapse to no height at all; if the container includes a padding or height value, it'll have some visible height.
- There are a two common ways to force a collapsed element to expand to the full height of its floated child elements:
- Setting the parent element's
overflowvalue tohiddenorauto - Clearing the floats with a CSS pseudo-element
- Setting the parent element's
- A clearfix fixes the collapsing issue by forcing a container to expand and contain the floated elements.
Related videos
By now you know that floating
an element takes the element
0:00
out of the normal document flow.
0:02
When you float elements left or right in
a container, the parent container's height
0:05
collapses because it no longer honors the
space of the floated elements inside it.
0:09
Now, you may not notice any problem at
all if the parent container doesn't have
0:14
a background color, image, or border.
0:19
In this lesson you'll learn why it's
always important to be aware of
0:22
collapsing containers when using floats.
0:26
In our layout the collapsed
parent container is the header.
0:28
It has a background color so we're able to
see that the browser does not account for
0:33
the height of the floated name element and
the navigation.
0:38
A parent container with floated
elements may not always collapse to no
0:43
height at all.
0:46
If the container includes
a padding value or
0:48
a height value,
it will have some visible height.
0:51
So for example the header in our layout
isn't collapsing entirely because
0:53
of the 1.5 em top and bottom padding
values applied to main-header,
0:59
so it still honors those padding values.
1:04
But if the header had
no padding whatsoever,
1:07
the headers height collapses to 0 height.
1:11
I want to open up the collapsed space
around the floated header elements.
1:20
Now I could force the header's height
to expand by giving it a fixed height.
1:23
So for instance, in the main-header rule,
I can say height: 110px.
1:30
And when we take a look at it again,
1:37
we can see that the background
color shows up again.
1:40
Now, this may be good enough to help you
in a pinch or you can use this on small
1:42
projects with really simple
header layouts like this one.
1:46
However, applying a fixed height to
a container isn't a flexible solution,
1:49
especially when you're dealing with
the elements that have bearing heights,
1:53
like columns which you will
learn more about later.
1:57
So I'll go back and remove the height
value from the main-header rule.
2:02
So there a few simple and more flexible
ways to force a collapsed element
2:08
to expand to the full height
of its floated child elements.
2:13
One way is setting the parent element's
overflow value to hidden, or auto.
2:17
The next way is clearing the floats
with a CSS pseudo element.
2:22
So if I go back to the main header
rule and add a overflow property and
2:26
set the value to either auto or
hidden, I'll use the value hidden.
2:33
We can see how it fixes the collapsing
issue by forcing the header to expand and
2:39
contain the floated elements.
2:44
This will do the trick, and depending on
your layout it may be all you need to do.
2:47
But the overflow property
isn't specifically for floats.
2:51
The value hidden can hide content
that shouldn't be hidden, and
2:55
the value auto can trigger
unwanted scroll bars.
3:00
So for example, you may have a drop down
menu in one of the navigation items, and
3:03
if the drop down has content
that expands below the header,
3:08
that content will not show up and
appear to be cut off.
3:12
So the most popular and
most ideal method web designers and
3:20
developers use for
containing floats is called a clearfix.
3:24
This clever method uses
a CSS pseudo element
3:29
to force a container to clear
its floated children so
3:33
that it doesn't collapse,
no matter how many float it contains.
3:36
Back in my stylesheet, I'm going to
scroll down to the media query and
3:41
inside the media query all
the way at the bottom,
3:45
I'm going to create a new
rule with the class clearfix.
3:48
And I'll append an after pseudo
element to this selector.
3:58
So after the clearfix class,
I'll type two colons, followed by after.
4:02
You can use any class name
you want as the clearfix.
4:08
Group, clear or
4:12
cf are also common class names web
designers use when writing clearfixes.
4:14
And the double colon in the selector
means that this is a pseudo element.
4:19
And you can learn a whole lot
more about pseudo elements
4:24
by checking out the links in
the teacher's notes of this video.
4:27
Inside this rule I'm going to
type the content property and
4:30
set the value to an empty set of quotes.
4:34
Now the clearfix rule
uses the content property
4:37
to generate a blank pseudo element
after an element from within the CSS.
4:41
The pseudo element appears in the page
as would a real HTML element.
4:46
In other words,
it creates an empty virtual element
4:50
at the bottom of the parent container.
4:53
Below the content declaration I'm
going to type display: table.
4:56
Now the display property
uses the value table
5:03
to display the pseudo element
as a block level table.
5:06
This mimics the HTML table
layout model but with CSS.
5:10
Now the table display mode isn't
as commonly used by developers
5:14
as the in-line, and in-line block modes
you learned about in the previous section.
5:17
And you could also read more
about this display value
5:21
in the teacher's notes of this video.
5:25
Now the most important part of this
clearfix is the clear both declaration.
5:27
The clear property is
directly related to floats.
5:34
And it's important for
controlling the behavior of floats.
5:38
The value both clears any collapsed space
5:41
created by floats on both
side of the container.
5:44
Now if you're not familiar with
some of these CSS properties and
5:48
values, don't worry.
5:50
All you really need to
know is one key concept.
5:52
When you apply this clearfix to
a non-floating element, like the generated
5:54
afterpseudo element, it moves
the element below all floated elements.
6:00
This movement prevents the container's
height from collapsing.
6:04
So now whenever you need to
clear the floats in a container
6:08
you simply add the clearfix
class to the element.
6:12
To fix the collapsed header, I'll
simply open up the index.html file and
6:16
scroll down to the container inside
main-header, and add the class clearfix.
6:21
Once I save my index file and
6:28
refresh the page we can see that
the header is no longer collapsed.
6:31
It now expands to the full height of
the floated name and main nav elements.
6:35
You need to sign up for Treehouse in order to download course files.
Sign up