clearfix hack

by kybernaut

HTML

<div class="component_data">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="component_data">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="component_data">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.item {
  background-color: silver;
  height: 50px;
  width: 50px;
  margin: 5px;
  float: left;
}
.component_data {
  display: block;
}
.component_data:nth-child(odd){
  background: white;
}
.component_data:after{
   display: block;
    content: "";
    clear: both;
}

.item:nth-child(4n+1) {
  background: red;
  clear:left
}