Best trick for clearing float in html

There are many ways to clear “float” property in css. The most common problem with float property is , it collapse the parent div container.

For example if you have HTML:

1
2
3
4

    This is line one 
    This is line one 

For above HTML you have CSS as:

Now what will happen, your div having class “line” will get collapsed due to float left property given to inner element.
By collapsed div we mean , if you give border to div “line” , you will see only one straight line rather a block.

To overcome this problem we have one very good trick which is compatible with every modern web browser.

Here we go:
Simply place a new div having class “clear” . That is like:

1
2
3
4
5

    This is line one 
    This is line one 
    

After this write css for div “clear” as

1
2

.line div{float:left}
.clear{clear:both}

All done!! Your problem of collapsed div is now solved.

Cheers!