<div id="clear"></div> what this code why we use it i saw in template but i cant understand what this code do sure i notice the change when remove the code from the page but i don't want learn from add and remove way Thanks
The ones that you saw probably used the class attribute instead of ID, since people often use them multiple times on the same page. By default, a float is not supposed to be "contained" by its parent element. The parent element acts like it isn't there, so it doesn't close it. Since people have started using layouts where columns are being floated, they run into this issue often because they don't know how to make the parent element hold the float. The easy fix is to set overflow to hidden, and the parent element will hold the float. There are 2 other ways, which would be to insert content after the parent element using the :after pseudo-class and the content property. Many people who don't know about overflow tend to use the clearfix class This inserts an invisible period after the element that its applied to, so the period is added after the floats and then it clears the floats (starts on a new line after the floats). The first rule of the clearfix doesn't work in IE because AFAIK it doesn't support the :after pseudo class nor does it support the content property. There are several property/value combos that can trigger hasLayout. If hasLayout is triggered, the parent element will contain the floats. You can trigger hasLayout by setting a width, height, zoom, inline-block and a few other properties. The other way is to manually insert an element after that clears the floats (any element following a float that has clear:both will not be adjacent or it wont be in the same line, it will start on a new line after the float). So <div class="clear"></div> is inserted after the floats and there's a rule in the stylesheet similar to... Or something like that, and it makes the parent element contain the float. Make a page and have 2 elements ( 1 division and 1 paragraph for example ). Then float the paragraph Don't apply a width to container, and test this in Firefox or Opera. The container won't hold the float, and you can try the methods mentioned above to make it hold the float.
Well, the display:block isn't doing anything because the <div i="clear"> is already a block. Clear both is clearing at least one right and one left float (if all the floats are to the left, they should've used clear:left). Setting the width should also not be necessary as that's also default for divs (they try to be as wide as possible from the get-go). 1px is the smallest height they could set it (I've used it on a page where overflow:auto gave me ugly scrollbars and overflow:hidden fcked with my margins-- I think I gave it a height because a book I was reading did that. Other than setting Haslayout (with either the width or the height), I dunno if this is even needed). Also not sure why they're using overflow:hidden in this case as this is an empty div. Almost looks like a cross between the two types of clearing. What you hope for in a page is that some other box comes along right after your floats, so you don't have an empty element in your HTML with no content. Suppose you have a body container with a float (a main page with a floating sidebar for instance). If there's a footer coming after the body container, the footer can have the clear. #footer { clear: left; other footer stuff } This is more ideal if you want to stick to the principles of having the HTML holding nothing but the page's content (text, images, info, ads) and the css and setting how the page looks (colours, placement and size of boxes, etc). Having in your HTML a div with nothing in it is something you try to aoid (but sometimes it's just the easiest thing).