Question

Which is better when floating elements to left right?

Using a generic .clearfix class:

.clearfix:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0;
}

which you can re-use and apply it to container elements:

   <div class="some-section clearfix">
     <div class="align-left"> left </div>
     <div class="align-right"> right </div>
   </div>

   <div class="some-other-section clearfix">
     <div class="align-right"> right </div>
   </div>

or specific clearing rules like:

.some-section:after, some-other-section:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0;
}

?

Answer 1

With the use of :after, one must considered the cross-browser issue. If we are to provide support for all browsers, including old ones, pseudo-elements may not be the way:

CSS selectors and pseudo selectors browser compatibility

---

Related to generic class vs specific class

By definition:

A generic class can be applied to any element in the markup, is best suited for use with generic formatting instructions that all elements will support, or for formatting instructions that need to be used on several types of element.

A specific class serves its purpose by only being applied to a specific element in the markup is best suited for formatting instructions which are specific to only one type of element.

The goals for using a Generic Class over a Specific one are: ^{among others}

1. Cleaner markup
2. Reutilization
3. Smaller files (browser contents download performance)
4. Easy to maintain or update