Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Page Layout with the Float Property Footer Layout with Floats

Adrian Yeow
Adrian Yeow
13,866 Points
Posted by Adrian Yeow
Adrian Yeow
13,866 Points

Clearfix on container

Is it possible to apply clearfix to container instead of footer? Why do we need to apply clearfix to footer instead of container?

style.css 
/* Complete the challenge by writing CSS below */



.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.footer-nav {
  float: left;  
}

.logo {
  float: right;  
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with CSS Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
    <body>
    <div class="container">
        <footer>
            <img class="logo" src="city-logo.svg" alt="logo">
            <ul class="footer-nav">
                <li><a href="#">Ice cream</a></li>
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>
            </ul>
            <p class="copyright">&copy;2015 The Best City.</p>
        </footer>
    </div>
    </body>
</html>

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Adrian,

One of the problems that the clearfix hack is intended to solve is when a parent collapses because it contains floated children. So you should apply the clearfix hack whenever you want to prevent an element from collapsing on its floated children.

In this case, the footer contains floated children but the container does not. The containers only child is the footer and that footer is not floated so there's no reason to apply it to the container.

If you want to prevent the footer from collapsing then you should apply the clearfix hack directly to the footer.

You might notice that with this html and css there's no visual difference between the two. But if you apply it to the container then you have not solved the underlying issue of the footer collapsing. It's still collapsing.

If you give the footer a background color like

footer {
  background: lightgray;
}

you will see the difference between applying clearfix to the footer vs. the container.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

There are no visible elements following the footer, so there would be no visible difference.

But for future development, it could make a difference if additional elements were added to the container. With the clearfix on the footer, the additional elements would have the benefit of the floats already cleared. But if it were placed on the container, the floats would still be in effect when they are rendered.