clearfix

Bootstrap4 clearfix

Bootstrap4のclearfixはIE9/Android5以上サポートになったため、記述がシンプルになった。

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

【CSS】最新のclearfixがどんどん短く。Bootstrap 2/3/4のCSSを見て(2016年版)

micro clearfix

2011年4月21日にNicolas Gallagherという方が、A new micro clearfix hackとして記事を投稿しました。
  • IE6以上に対応
.cfx:before,
.cfx:after{
content:" ";
display:table;
}
.cfx:after{
clear:both;
}
.cfx{
*zoom:1;
}

content: ".";なし版

  • IE6以上であればこれでいい
.cfx{
*zoom:1;
*min-height:0;
}
.cfx:after{
content:"";
display:block;
clear:both;
}

よく使ってたやつ

オーストラリア人のTony Aslettという方が、cleafixを考えました。
  • Netscape対応のために content: "."; がある
.cfx:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cfx{
display:inline-table;
min-height:1%;
}
* html .cfx{
height:1%;
}
.cfx{
display:block;
}

参考


最終更新: 2017-10-15 (日) 22:57:02