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

clear:both applied to copyright class

My question is why are we required to apply the clear:both element to the copyright class when clearfix class has been applied to the footer?

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



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

.footer-nav {
  float: left;  
}

.footer-nav li {
  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 class="clearfix">
            <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,

I recommend that you click the "preview" button on task 4 before you add clear: both to the copyright so that you can see what happens without it.

When you apply the clearfix to the footer, all that it's doing is making sure that the footer will expand to contain all of its floated children. Normally a parent will collapse and not contain its floated children.

This does not have any effect on how the children interact with each other. It's only saying, "You have to expand to contain all of your children."

Inside the footer, the logo and nav are floated but the copyright paragraph is not. This means that if space allows it, the copyright paragraph could appear along side these floated elements and flow around them. And that is indeed what happens if you check the preview.

By adding clear: both to the copyright, you're telling the browser that you want it to push the copyright down far enough so that it clears previously floated items.

David Kanwisher
David Kanwisher
9,751 Points
David Kanwisher
David Kanwisher
9,751 Points
  1. Styles can be inherited from a parent Some styles, like font family, text-alignment etc., are automatically inherited by child elements from their parent element (i.e. by an element contained inside another one).

Others are not automatically inherited.

https://webdesignfromscratch.com/html-css/css-inheritance-cascade/#1

The copyright doesn't inherit the clearfix class given to its parent, so it is stuck inside the active floats.

Someone correct me if I'm wrong, as I am learning as well.

David Kanwisher
David Kanwisher
9,751 Points
David Kanwisher
David Kanwisher
9,751 Points

http://stackoverflow.com/questions/5612302/which-css-properties-are-inherited

This is a pretty good list of which properties are automatically inherited, so I'm assuming anything NOT on this list is not inherited and must be specifically targeted.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi David,

I don't think that inheritance factors into this because the clearfix styles aren't being applied to the parent footer element. They're being applied to the ::after pseudo element of the footer.

You can think of it as a virtual last child to the footer element. It would come right after the copyright paragraph. The styles are being applied to that element.

David Kanwisher
David Kanwisher
9,751 Points
David Kanwisher
David Kanwisher
9,751 Points

You're right, now that I think more about it, I will leave this up in case someone else thought like I did. Would applying clear: both; to the <footer> solve both problems in this specific example?

I just tested this. Doesn't do anything

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

No, I wouldn't think it would solve either problem.

With clear: both on the footer you're saying that you want the footer itself to clear any previously floated items. In this case there aren't any previous items to the footer that are floated so it shouldn't do anything. So it's really meant to solve a different problem than what applying clearfix would solve.

That would be useful if you had the following overall html structure,

<div class="col"></div>
<div class="col"></div>
<footer></footer>

Let's suppose that both columns are floated to create a 2 column layout with a full width footer at the bottom. In that case, you'd want to apply clear: both to the footer to make sure that it clears previously floated items. The clearfix hack wouldn't help in regards to that problem.

I'm probably over-simplifying here but you would apply clear:both directly to an element whenever you need to make sure that element clears previously floated items. You would apply the clearfix hack to an element whenever that element contains floated children and you want to prevent the parent from collapsing in height.

Something I didn't think about before on this challenge is that once you get to task 4 and apply clear: both to the paragraph, the clearfix hack on the footer is redundant. The paragraph is serving the same purpose as the ::after pseudo element.