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 Foundations The Box Model Floats

Posted by Leumas Erasa
Leumas Erasa
974 Points

Why add another element with clear property applied to stop parent collapse?

My understanding is that if a parent contains floated child elements it collapses because it does not expand around the floated children as it ignores them when calculating its height.

Why does the addition of another element (virtual or otherwise)with clear applied make parent the consider the heights of the floated children?

Let me make my question clear with this crude code below:

<div>
  <p style="float: left;">Div 1</p>    /*height not considered*/
  <p style="float: left;">Div 2</p>    /*height not considered*/
  <div class="clearfix"></div>    /*why does this make the parent include child heights above */   
</div>

css

  .clearfix{
      clear:both;
  }

Any help much appreciated.

1 Answer

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Simple answer: because floats are weird.

Check out this article for (pretty much) everything you need to know about floats: https://css-tricks.com/all-about-floats/

Leumas Erasa
Leumas Erasa
974 Points

I have already read that article....It doesn't shed light on my question...Thanks