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

HTML How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Ryan Schmelter
Ryan Schmelter
9,710 Points
Posted by Ryan Schmelter
Ryan Schmelter
9,710 Points

Why do the footer images need to be cleared?

Just curious. The "float" styling is only being applied to the #gallery, which does not include the footer. Why does the footer get caught in the float if it isn't specified?

1 Answer

evannex
evannex
2,436 Points
evannex
evannex
2,436 Points

This happens because float takes an element out of the normal flow of the document. So elements below it move (sometimes strangely) since the floated elements aren't where they would be without the float. A simple clear: both; should work as a fix in most cases. But sometimes a clearfix is needed. This is especially noticeable if you have a div surrounding the floated elements, when they are floated, the div will no longer surround the elements because they aren't in the normal flow of the page.

Ryan Schmelter
Ryan Schmelter
9,710 Points
Ryan Schmelter
Ryan Schmelter
9,710 Points

Thank you. That's really helpful. Does it stand to reason that elements above the float won't be affected? Also, is clearfix a property? I'm not familiar with that one.

evannex
evannex
2,436 Points
evannex
evannex
2,436 Points

I'm glad I could help. Your reasoning is correct. Elements above the float aren't affected. And no clearfix is not a property. its usually a class that you add to floated items if you want items after it to behave properly. It tends to look something like this:

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