Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations The Box Model Floats

doubts about float

what happen when a div contain floating children ? why does it collapse and how does clear helps in fixing this bug ? and what do we mean by space around the floats please i am in a big doubt

Could you supply the sample code your having the problem with? However, and in general, collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float after the floated elements in the container but before the close of the container (http://css-tricks.com/all-about-floats/)

2 Answers

David Service
David Service
12,928 Points

Hi Gurdeep,

Without seeing your code, let me take a crack at this:

When we use floats it takes the element(s) with the float out of the regular document flow.

If all of the child elements inside of the <div> are taken out of the document flow by floating them, the parent container doesn't know what to surround; it only recognizes child elements inside the document flow, but floated elements are no longer in that regular flow.

So what happens is that the "clear fix" is a way to insert a pseudo-element at the end of the parent <div> to give it something to contain. By containing this last pseudo-element, it automatically contains all of the floated elements that came before.

As for space around the floats, when we float an element left, it leaves extra space to the right since the element is no longer in its original position at the centre; this extra space to the right can be used by the browser to fit other child elements in (if there is enough space between the left-floated element and the browser edge). If we float something to the right, it leaves extra space on the left that other elements can fit into (again, if there is enough space).

What may be confusing you is that the browser will try its best to fill the extra space left behind by floated elements, so it usually doesn't appear as empty space.

Hope this helps.

wow ! you game me the exact ans and the best ans ma all doubts are clear thank you David.

Could you supply the sample code your having the problem with? However, and in general, collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float after the floated elements in the container but before the close of the container (http://css-tricks.com/all-about-floats/)

its solved thank you Mitchell and the link is helpful thank you