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:

<div class="line">
    <div>This is line one </div>
    <div>This is line one </div>
</div>

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:

<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

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

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

Cheers!

Recently Published

»

10 Best Prototyping Tools for UI/UX Designers

Website design for a client gets only successful if you follow their ...

»

Social Media Marketing: Strategy To Boost Ecommerce-Traffic

According to a recent study, the experts revealed that people aged ...

»

How Flutter Can Help Reduce Overall Mobile App Development Cost?

Before jumping on answering the question, let me first walk you ...

»

Which One is Better? DigitalOcean Or AWS?

Digitalocean or AWS: Picking a cloud service for your application or ...

»

Killing way to select Domain Name and Hosting

Planning to launch your online presence? We know it’s all very ...

»

7+ blogs to inspire how they made more than $200 in a day

On this page I want to go through the blogs on how they earn money ...

»

5 Best Practices to Make Responsive Web Design in 2020

According to statistics, 40.1% of the time spent on websites came ...

»

7 sites to download free stock videos for TikTok or YouTube

Many of us always wandering for free stock videos to integrate into ...

»

Website Uniqueness: How it affects your blog success?

Recently, more and more people use website builders ‘cause it is ...