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:

This is line one
This is line one

For above HTML you have CSS as:

.line div{float:left}

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:

This is line one
This is line one

After this write css for div “clear” as

.line div{float:left}

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


  • December 15, 2009
8 Best Free Stock Video Websites for Tiktok, Reels, and Shorts Top 5 PHP Frameworks: Fast and Secure