Benjamin Charity

Create a Clear

January 7th 2011

Sometimes it is necessary to reset your floats by creating a clear. This can be easily achieved with a few lines of CSS.

/* Creating a Clear */
.clear::after {
  clear: both;
  content: " ";
  display: block;
  height: 0;
  visibility: hidden;
}
  * html .clear { 
    height: 1%;
  } 
    *:first-child+html .clear {
      min-height: 1px;
    }

Then simply add the class of clear to the element that the clear needs to follow.