Renaming and Extending Easy-Clearing, AKA Clearfix

css

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

group_css

.groupList > li,
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

group_css_ie

/* IE6 */
* html .groupList li,
* html .group { height: 1%; }
* html .groupList li li { height: auto; } /* Resets nested LIs */

/*IE7 */
.group > li,
.group { min-height: 1px; }

html

<ul class="comments">
  <li class="group">
    <img src="carla.jpg" alt="Carla&#x27;s Picture" />
    <p>Tiny and I miss you</p>
  </li>
  <li class="group">
    <img src="steven.jpg" alt="Steven&#x27;s Picture" />
    <p>I need a favor! It will take you 5 seconds.</p>
  </li>
  <li class="group">
    <img src="buzz.jpg" alt="Buzz&#x27;s Picture" />
    <p>I speak gibberish</p>
  </li>
</ul>

html1

<ul class="comments groupList">
  <li>
    <img src="carla.jpg" alt="Carla&#x27;s Picture" />
    <p>Tiny and I miss you</p>
  </li>
  <li>
    <img src="steven.jpg" alt="Steven&#x27;s Picture" />
    <p>I need a favor! It will take you 5 seconds.</p>
  </li>
  <li>
    <img src="buzz.jpg" alt="Buzz&#x27;s Picture" />
    <p>I speak gibberish</p>
  </li>
</ul>

ie

/* IE6 */
* html .group { height: 1%; }

/*IE7 */
.group { min-height: 1px; }