clearfix 2019

2019年2月24日日曜日

CSS

t f B! P L

clearfix 2019

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

clearfixとは

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

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;
}
スポンサーリンク

QooQ