As we know there are multiple ways to clear a div. I always preferred the clearfix (bootstap) method.
But when there need to clear a list elements/divs (multiple) like following code
<ul>
<li class="clearfix"> some floated elements goes here.. </li>
<li class="clearfix"> some floated elements goes here.. </li>
<li class="clearfix"> some floated elements goes here.. </li>
.
.
.
So on
</ul>
In the above case, Its not looks convenient to add a class for every li.
Instead of that we can use overflow: hidden;.
Still there have lots of opinion on this topic.
Can anybody help here which method is strongly recommended on above situation and Why it is better?.
Adding classes to 'li' will effect on page loading?
Both methods achieve similar results, but in some cases, one may be more advantageous than the other.
The use of overflow: {auto|hidden} creates a new block formatting context and that has implications for how margins and paddings are contained within the parent elmement. For example, with a new block formatting context, some margins will not collapse as you might expect.
With a clearing element (either in the DOM or as a pseudo element), margins collapse as expected.
Beyond this distinction, it is hard to recommend one method over the other.
Comment: Adding Classes to li
Adding an additional class name to the li elements will not significantly slow down the page load time as a result of the work the broswer does to parse the page and apply the stylesheets.
Unless you have a complex web page with thousands of CSS rules, I don't think that you need to be too concerned about browser performance.
What is more relevant to the average web developer is that having a page that is marked up with numerous classes can make maintenance more difficult. Keeping stylesheets organized is a skill that you develop with experience.