www.webdeveloper.com
Results 1 to 10 of 10

Thread: what does clear: both do ?

  1. #1
    Join Date
    Nov 2004
    Location
    xxxyyy
    Posts
    357

    what does clear: both do ?

    .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

  2. #2
    Join Date
    Nov 2010
    Location
    Bristol, United Kingdom
    Posts
    47

    Smile simple...

    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!!
    Freelance Web Design/Developer - www.mikeoram.co.uk

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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

    Code:
    <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.

  4. #4
    Join Date
    Nov 2004
    Location
    xxxyyy
    Posts
    357
    Quote Originally Posted by mike-web-dev View Post
    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.

  5. #5
    Join Date
    Nov 2004
    Location
    xxxyyy
    Posts
    357
    Quote Originally Posted by Kor View Post
    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 .

  6. #6
    Join Date
    Nov 2010
    Location
    Bristol, United Kingdom
    Posts
    47

    resolved

    Quote Originally Posted by cofactor View Post
    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.
    Freelance Web Design/Developer - www.mikeoram.co.uk

  7. #7
    Join Date
    Nov 2004
    Location
    xxxyyy
    Posts
    357
    Quote Originally Posted by mike-web-dev View Post
    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 .

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by cofactor View Post
    some part is confusing
    Just study the CSS language. It won't be confusing anymore.

  9. #9
    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.

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by stefanraj View Post
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles