doubts about float

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.