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
<div class="line">
    <div>This is line one </div>
    <div>This is line one </div>
</div>

For above HTML you have CSS as:

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

1
2
3
4
5
<div class="line">
    <div>This is line one </div>
    <div>This is line one </div>
    <div class="clear"></div>
</div>

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!

Recently Published

»

9 Social Media and Marketing Tools Recommended for a Business

A business is set up to have a profit by delivering a product or a ...

»

Why hand-coding is always preferable over website builders

There is long debate as to why hand-coding is preferable over website ...

»

8 Reasons Your Site Should be Using Progressive Web Apps

Google has been driving at full speed since 2015 to help developers, ...

»

Tips to Handle Negative Feedback for Your Mobile App

Feedback from users for your mobile app is as essential as its ...

»

Why is Link Building So Important? Read this to understand

Getting a high ranking on search engine results is important to the ...

»

Productivity Tips for Web Developers for Efficient Time Management

The world is full of distractions. Whether you are a work-from-home, ...

»

The Importance of a Good Domain Name

The right domain name can genuinely make or break a business – ...

»

Cloud Strategy of Oracle: Working or Not?

Though Oracle considered cloud strategy as gibberish long before, it ...

»

Some Excellent SEO Tools for Boosting SEO Rankings like Never Before

You could be having a really great-looking website and the niftiest ...