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

»

Modern Changes That You Should Consider for Your Web Site

Websites need to modernize and get updated periodically otherwise ...

»

Super Tips For A Flawless Website

A website has a specific purpose. And your job is to design a website ...

»

Wix Offers Best Free Web Apps for Artists and Photographers

The famous online website builder Wix is known for providing the ...

»

What You Should Know Before Setting Up a Digital Marketing and Web Design Company

Running a digital marketing and web designing company can be a ...

»

Important Factors to Think About When Starting a Mailing List

Many bloggers and business owners don’t have a mailing list, ...

»

Tried and Tested Strategies for Boosting eBook Sales

As you have by now realized, writing your ebook was just the first ...

»

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