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!
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
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
David Service12,928 Points
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.
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/)