How to clearfix without markup?

Question

I need to find a way to clearfix a set of floated elements without extra markup.

For example, I have a 2 columns grid in section#main_features. Each div.feature has width: 50% and is float: left. What I want is to find a way to clearfix the rows without extra html markup (since I want to make a simple semantic grid).

<section id="main_features">
  <div class="feature">
    ...
  </div>
  <div class="feature">
    ...
  </div>
  <div class="feature">
    ...
  </div>
  <div class="feature">
    ...
  </div>
</section>

Note that the rows here are just a "concept" (each row is two .feature). I'm using a semantic approach to build this grid, therefore I don't want to need to wrap the columns of each row and then clearfix this wrapper. I'm looking for some trick to clearfix and break the row using only css - or scss, less, etc.

This problem seems to be more complex than it looks.

Thanks in advance.

Answer 1

I have been using the semantic group 'micro clearfix' which I found on CSS Tricks.

.group:after {
  content: "";
  display: table;
  clear: both;
}

The CSS is similar to the above solutions, however the concept is that you can add it to any element which you wish to 'group' together and be followed by a clear. Eg:

<header id="masthead" class="group">
  //content
</header>

The above link also has sub-IE8 rules.

EDIT My apologies, I just answered the title of the question, without properly reading your scenario. I would not use floats in this case. Instead, I like to use display: inline-block like so:

#main_features {
  font-size: 0; /* this resets the default padding created by the inline-block rule below */
  margin: -2%; /* offsets the positive margin below */
}

.feature {
  display: inline-block;
  vertical-align: top;
  width: 46%;
  margin: 2%; /* width + (2x margin) = 50%*/
  font-size: 12px; /* because it is reset to 0 by parent */
}

The font is set to zero on the parent element because some browsers add padding to an inline-block element. The parent element also has a negative margin to offset that of its children. This allows the content to align with the rest of your page.

I have made a basic demo of this here.

Answer 2

You can use the css :after to do this, just by putting an invisible full stop after it, forcing the clear fix.

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

Alternatively, I just found this newer one from Beau Smiths answer here

/* For modern browsers */
.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
    zoom:1;
}

Answer 3

If you have been applying clearfix with a class-name and the appropriate selector (.clearfix), then you can do the same with the selector #main_features

So if your normal clearfix style declarations look like this:

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

...then you can avoid having to apply the clearfix class simply by adding to the selector this way:

.clearfix:after, #main_features:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;  }
*:first-child+html .clearfix, *:first-child+html #main_features { zoom: 1; } /* IE7 */

...and just leave your markup as-is.

Answer 4

It's an quiet old question but I just stumbled upon it while having a similar question. Anyways I solved it by using the nth-child pseudo selector to clear the float every third child within the container.

.main_features .feature:nth-child(3n) {
  clear: left;
}