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

»

What Really Makes a Website User-Friendly

Whether it’s for business or personal use, having a website online ...

»

5 Features of Virtual Private Server that put you in complete Control of Your Website

For a decade now, virtual private server has been a preferred hosting ...

»

8 Ways the Right Ecommerce Platform Makes Your Business Perform Better

Starting your own ecommerce store is an exciting experience, but ...

»

The SSL certificates and why are they essential for sites

What are SSL and its purpose? SSL is a modern technology that is ...

»

Entering Into M-Commerce as a Small Business

According to a December 2016 Business Insider article, the U.S. ...

»

How to Convert More Traffic Quickly and Easily

If you’ve got a blog that gets plenty of traffic but ...

»

Strengthen Workplace Productivity with Live Chat Software

Live chat has become an important part of every company’s customer ...

»

How More Powerful Smartphones Are Making Websites Load Faster

Smartphone speeds keep accelerating. Last October, Qualcomm joined ...

»

The Most Effective Method To Present A Logo Plan

The Most well-known creators’ battles are and how they are ...