[CSS] 'clearfix' to Clear Float

Tadashi Shigeoka ·  Sun, November 13, 2011

Here’s a memo of sample code for “clearfix” to clear float in CSS.

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

That’s all.

【References】

[CSS]floatを解除する「clearfix」のIE6/7に対応した改良版 | コリス

That’s all from the Gemba.