2021年版の clearfix はこれだ！！

CSSのclearfixについての、2019年時点の最新版です。

clearfixとは

親要素内に配置したfloatする要素の、回り込みを解除する為の、CSSテクニックです。

2021年版の clearfix

.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
} 
.clearfix {
  display: block;
}

2019年現在の最新版clearfix

Chrome, Firefox, Edge, Safariなどの主要ブラウザと、IE11をサポートしています。

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

昔のclearfix

ひと昔前のclearfixを見てみましょう。
こちらは、IE8以降をサポートしたものです。

.clearfix:before,
.clearfix:after {
	display: table;
	content: " ";
}
.clearfix:after {
	clear: both;
}

さらに、昔のclearfixをみてみます。
こちらは、IE6以降をサポートしたものです。

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