what does clear: both do ?

[cofactor]

.clear { clear: both;}

what it does ? I'm not clear , what it clears. I understand its used after float:left and float:right ...But I don't understand , why its used and what it does .

Need your help to understand this concept.
could you please explain in simple steps ?

Thanks

[mike-web-dev]

its very simple, if you apply a float to a element, it will affect other elements which come after it. clear: both will clear the float direction to default, and so prevent the floats defined previously from affecting other elements. You will not see its effect in the new browsers but it is essential for the old browsers when cross browser testing. IE6...argh!!

[Kor]

There is also, another, subsequent, utilization of the clear CSS property.

If all the child nodes of a parent are floated, they get out of their parent's flow, thus the parent loses its so called hasLayout property. The visual effect is that the parent seems to become empty, without any height (if no default is set), as it would not be the container of its child nodes any more.

One of the solution to solve that is to insert an empty, cleared, element, as a last child of that parent

<div class="container">
    <div style="float:left">content</div>
    <div style="float:left">content</div>
    <div style="clear:both"></div>
</div>

It is not the only solve, but this might help you to understand how the float and clear CSS properties work.

[cofactor]

its very simple, if you apply a float to a element, it will affect other elements which come after it.
what do you mean by this ? suppose , I added a float:left to a element ...what affect it can impulse to other elements ?

clear: both will clear the float direction to default, and so prevent the floats defined previously from affecting other elements.

float direction to default ?? what is that ? what is the float direction by default ? Do you mean if I don't add float css to any elelemnt they still have a default float associated with them ? If so , whats that default float direction ?


You will not see its effect in the new browsers but it is essential for the old browsers when cross browser testing. IE6...argh!!

Thanks for the post.

some part of your comment is confusing . see my queries in red above. someone please clarify.

[cofactor]

There is also, another, subsequent, utilization of the clear CSS property.

If all the child nodes of a parent are floated, they get out of their parent's flow

what is parent's flow ? I don't understand this part ?

I see in your code you are adding float:left to every element . So, effectively , all elements will be left floated. whats wrong here ? how does it affect the parent flow?

some part is confusing . please see blue comment in the above .

[mike-web-dev]

Thanks for the post.

some part of your comment is confusing . see my queries in red above. someone please clarify.

Sorry, to clarify. If you float an element for example a image inside a div, then that float can affect other elements inside that div. By clearing the float, you set it to default (which is no float inless previously defined). further more if you float a div, it can affect the positioning of other elements which come after it, this is solved by clearing the float. I cannot specifically tell you which elements it can effect as it depends on the site, the elements and the browser you are using.

I hope that makes more sense?

In reply to the comment below mine...the parent float it basically what i described above...having one element (example an image) inside a div. the parent would be the div. So the element which is floated inside that div may affect the float direction of that div (parent element) or other elements inside that parent.

Sorry if the language is complex.

[cofactor]

Sorry, to clarify. If you float an element for example a image inside a div, then that float can affect other elements inside that div. By clearing the float, you set it to default (which is no float inless previously defined). further more if you float a div, it can affect the positioning of other elements which come after it, this is solved by clearing the float. I cannot specifically tell you which elements it can effect as it depends on the site, the elements and the browser you are using.

I hope that makes more sense?

Here I have a small question , when you say clear float ...you clear float to which element ? Is it the same element you want to clear float for which you added a float:left (say) ?

In reply to the comment below mine.....the parent float it basically what i described above...having one element (example an image) inside a div. the parent would be the div. So the element which is floated inside that div may affect the float direction of that div (parent element) or other elements inside that parent.

did not get it .... very much confusing

Sorry if the language is complex.

Thanks for the post. comments above .

[Kor]

some part is confusing

Just study the CSS language. It won't be confusing anymore.

[stefanraj]

Hi,

Simply the purpose of "clear:both" is that it will remove the previously used floats for the current tag which has been used "clear:both" now.

[Kor]

Hi,

Simply the purpose of "clear:both" is that it will remove the previously used floats for the current tag which has been used "clear:both" now.

And for the next tags.